
<!DOCTYPE HTML>
<html lang="zh-hans" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>element · Aivin开发笔记</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        <meta name="author" content="Aivin">
        
        
    
    <link rel="stylesheet" href="../../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-search-plus/search.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-anchor-navigation-ex/style/plugin.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-tbfed-pagefooter/footer.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-donate/plugin.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-local-video/video-js.min.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-splitter/splitter.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-theme-comscore/test.css">
                
            
        

    

    
        
        <link rel="stylesheet" href="../../styles/website.css">
        
    

        
    
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="iview.html" />
    
    
    <link rel="prev" href="vue-i18n.html" />
    

    
        <link rel="shortcut icon" href='../../assets/images/favicon.ico' type="image/x-icon">
    
    
        <link rel="bookmark" href='../../assets/images/favicon.ico' type="image/x-icon">
    
    
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="输入并搜索" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../../">
            
                <a href="../../">
            
                    
                    个人信息
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="友情链接.html">
            
                <a href="友情链接.html">
            
                    
                    友情链接
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="js.html">
            
                <a href="js.html">
            
                    
                    web前端
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="html5.html">
            
                <a href="html5.html">
            
                    
                    html5
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="js.html">
            
                <a href="js.html">
            
                    
                    js
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="css.html">
            
                <a href="css.html">
            
                    
                    css
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.4" data-path="JSX.html">
            
                <a href="JSX.html">
            
                    
                    JSX
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.5" data-path="CommonJS.html">
            
                <a href="CommonJS.html">
            
                    
                    CommonJS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.6" data-path="ES6.html">
            
                <a href="ES6.html">
            
                    
                    ES6
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.7" data-path="mockjs.html">
            
                <a href="mockjs.html">
            
                    
                    mockjs
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.8" data-path="ESLint.html">
            
                <a href="ESLint.html">
            
                    
                    ESLint
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.9" data-path="alias.html">
            
                <a href="alias.html">
            
                    
                    alias
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.10" data-path="vueJS.html">
            
                <a href="vueJS.html">
            
                    
                    vueJS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.11" data-path="Vuex.html">
            
                <a href="Vuex.html">
            
                    
                    Vuex
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.12" data-path="vue-router.html">
            
                <a href="vue-router.html">
            
                    
                    vue-router
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.13" data-path="vue-i18n.html">
            
                <a href="vue-i18n.html">
            
                    
                    vue-i18n
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.3.14" data-path="element.html">
            
                <a href="element.html">
            
                    
                    element
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.15" data-path="iview.html">
            
                <a href="iview.html">
            
                    
                    iview
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.16" data-path="test.html">
            
                <a href="test.html">
            
                    
                    test
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            本书使用 GitBook 发布
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../.." >element</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div class="search-plus" id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <div id="anchor-navigation-ex-navbar"><i class="fa fa-navicon"></i><ul><li><span class="title-icon "></span><a href="#element"><b>1. </b>element</a></li><ul><li><span class="title-icon "></span><a href="#element-&#x5B89;&#x88C5;"><b>1.1. </b>element &#x5B89;&#x88C5;</a></li><li><span class="title-icon "></span><a href="#element-&#x81EA;&#x5E26;&#x5B57;&#x4F53;"><b>1.2. </b>element &#x81EA;&#x5E26;&#x5B57;&#x4F53;</a></li><li><span class="title-icon "></span><a href="#element-&#x5185;&#x7F6E;-icon"><b>1.3. </b>element &#x5185;&#x7F6E; Icon</a></li><li><span class="title-icon "></span><a href="#&#x81EA;&#x52A8;&#x9002;&#x914D;-&#x9690;&#x85CF;&#x6216;&#x663E;&#x793A;"><b>1.4. </b>&#x81EA;&#x52A8;&#x9002;&#x914D; &#x9690;&#x85CF;&#x6216;&#x663E;&#x793A;</a></li><li><span class="title-icon "></span><a href="#element-&#x5185;&#x7F6E;&#x63A7;&#x4EF6;"><b>1.5. </b>element &#x5185;&#x7F6E;&#x63A7;&#x4EF6;</a></li><ul><li><span class="title-icon "></span><a href="#container-&#x5E03;&#x5C40;&#x5BB9;&#x5668;"><b>1.5.1. </b>Container &#x5E03;&#x5C40;&#x5BB9;&#x5668;</a></li><li><span class="title-icon "></span><a href="#el-scrollbar--&#x6EDA;&#x52A8;&#x6761;"><b>1.5.2. </b>el-scrollbar  &#x6EDA;&#x52A8;&#x6761;</a></li><li><span class="title-icon "></span><a href="#el-submenu"><b>1.5.3. </b>el-submenu</a></li><li><span class="title-icon "></span><a href="#el-button-&#x6309;&#x94AE;"><b>1.5.4. </b>el-button &#x6309;&#x94AE;</a></li><li><span class="title-icon "></span><a href="#el-radio-&#x5355;&#x9009;&#x6846;"><b>1.5.5. </b>el-radio &#x5355;&#x9009;&#x6846;</a></li><li><span class="title-icon "></span><a href="#el-checkbox-&#x591A;&#x9009;&#x6846;"><b>1.5.6. </b>el-checkbox &#x591A;&#x9009;&#x6846;</a></li><li><span class="title-icon "></span><a href="#el-input-&#x8F93;&#x5165;&#x6846;"><b>1.5.7. </b>el-input &#x8F93;&#x5165;&#x6846;</a></li><li><span class="title-icon "></span><a href="#el-input-number-&#x8BA1;&#x6570;&#x5668;"><b>1.5.8. </b>el-input-number &#x8BA1;&#x6570;&#x5668;</a></li><li><span class="title-icon "></span><a href="#el-select-&#x9009;&#x62E9;&#x5668;"><b>1.5.9. </b>el-select &#x9009;&#x62E9;&#x5668;</a></li><li><span class="title-icon "></span><a href="#el-cascader-&#x7EA7;&#x8054;&#x9009;&#x62E9;&#x5668;"><b>1.5.10. </b>el-cascader &#x7EA7;&#x8054;&#x9009;&#x62E9;&#x5668;</a></li><li><span class="title-icon "></span><a href="#el-switch-&#x5F00;&#x5173;"><b>1.5.11. </b>el-switch &#x5F00;&#x5173;</a></li><li><span class="title-icon "></span><a href="#el-slider-&#x6ED1;&#x5757;-&#x3001;&#x62D6;&#x52A8;&#x6761;"><b>1.5.12. </b>el-slider &#x6ED1;&#x5757; &#x3001;&#x62D6;&#x52A8;&#x6761;</a></li><li><span class="title-icon "></span><a href="#el-time-select--&#x65F6;&#x95F4;&#x9009;&#x62E9;&#x5668;"><b>1.5.13. </b>el-time-select  &#x65F6;&#x95F4;&#x9009;&#x62E9;&#x5668;</a></li><li><span class="title-icon "></span><a href="#el-date-picker---&#x65E5;&#x671F;--&#x65F6;&#x95F4;&#x9009;&#x62E9;&#x5668;"><b>1.5.14. </b>el-date-picker   &#x65E5;&#x671F; + &#x65F6;&#x95F4;&#x9009;&#x62E9;&#x5668;</a></li><li><span class="title-icon "></span><a href="#el-upload--&#x4E0A;&#x4F20;"><b>1.5.15. </b>el-upload  &#x4E0A;&#x4F20;</a></li><li><span class="title-icon "></span><a href="#el-rate-&#x8BC4;&#x5206;"><b>1.5.16. </b>el-rate &#x8BC4;&#x5206;</a></li><li><span class="title-icon "></span><a href="#el-color-picker-&#x989C;&#x8272;&#x9009;&#x62E9;&#x5668;"><b>1.5.17. </b>el-color-picker &#x989C;&#x8272;&#x9009;&#x62E9;&#x5668;</a></li><li><span class="title-icon "></span><a href="#el-transfer-&#x7A7F;&#x68AD;&#x6846;"><b>1.5.18. </b>el-transfer &#x7A7F;&#x68AD;&#x6846;</a></li><li><span class="title-icon "></span><a href="#el-form--&#x8868;&#x5355;"><b>1.5.19. </b>el-form  &#x8868;&#x5355;</a></li><li><span class="title-icon "></span><a href="#el-table-&#x8868;&#x683C;"><b>1.5.20. </b>el-table &#x8868;&#x683C;</a></li><li><span class="title-icon "></span><a href="#el-tag-&#x6807;&#x7B7E;"><b>1.5.21. </b>el-tag &#x6807;&#x7B7E;</a></li><li><span class="title-icon "></span><a href="#el-progress-&#x8FDB;&#x5EA6;&#x6761;"><b>1.5.22. </b>el-progress &#x8FDB;&#x5EA6;&#x6761;</a></li><li><span class="title-icon "></span><a href="#el-tree--&#x6811;&#x5F62;&#x63A7;&#x4EF6;-&#x3001;&#x591A;&#x7EA7;&#x6298;&#x53E0;"><b>1.5.23. </b>el-tree  &#x6811;&#x5F62;&#x63A7;&#x4EF6; &#x3001;&#x591A;&#x7EA7;&#x6298;&#x53E0;</a></li><li><span class="title-icon "></span><a href="#el-collapse-&#x6298;&#x53E0;&#x9762;&#x677F;"><b>1.5.24. </b>el-collapse &#x6298;&#x53E0;&#x9762;&#x677F;</a></li><li><span class="title-icon "></span><a href="#el-pagination--&#x5206;&#x9875;"><b>1.5.25. </b>el-pagination  &#x5206;&#x9875;</a></li><li><span class="title-icon "></span><a href="#el-badge--&#x6807;&#x8BB0;--&#x3001;&#x7EA2;&#x70B9;&#x63D0;&#x793A;"><b>1.5.26. </b>el-badge  &#x6807;&#x8BB0;  &#x3001;&#x7EA2;&#x70B9;&#x63D0;&#x793A;</a></li><li><span class="title-icon "></span><a href="#el-alert-&#x6587;&#x672C;-&#x63D0;&#x793A;&#x4FE1;&#x606F;"><b>1.5.27. </b>el-alert &#x6587;&#x672C; &#x63D0;&#x793A;&#x4FE1;&#x606F;</a></li><li><span class="title-icon "></span><a href="#el-dialog-&#x5BF9;&#x8BDD;&#x6846;"><b>1.5.28. </b>el-dialog &#x5BF9;&#x8BDD;&#x6846;</a></li><li><span class="title-icon "></span><a href="#el-tooltip--&#x6587;&#x5B57;&#x63D0;&#x793A;"><b>1.5.29. </b>el-tooltip  &#x6587;&#x5B57;&#x63D0;&#x793A;</a></li><li><span class="title-icon "></span><a href="#thisnotify-&#x901A;&#x77E5;"><b>1.5.30. </b>this.$notify &#x901A;&#x77E5;</a></li><li><span class="title-icon "></span><a href="#v-loading-&#x52A0;&#x8F7D;"><b>1.5.31. </b>v-loading &#x52A0;&#x8F7D;</a></li><li><span class="title-icon "></span><a href="#el-menu-&#x5BFC;&#x822A;&#x680F;"><b>1.5.32. </b>el-menu &#x5BFC;&#x822A;&#x680F;</a></li><li><span class="title-icon "></span><a href="#el-tabs--&#x6807;&#x7B7E;&#x9875;"><b>1.5.33. </b>el-tabs  &#x6807;&#x7B7E;&#x9875;</a></li><li><span class="title-icon "></span><a href="#el-breadcrumb-&#x9762;&#x5305;&#x5C51;"><b>1.5.34. </b>el-breadcrumb &#x9762;&#x5305;&#x5C51;</a></li><li><span class="title-icon "></span><a href="#el-dropdown--&#x4E0B;&#x62C9;&#x83DC;&#x5355;"><b>1.5.35. </b>el-dropdown  &#x4E0B;&#x62C9;&#x83DC;&#x5355;</a></li><li><span class="title-icon "></span><a href="#el-steps--&#x6B65;&#x9AA4;&#x6761;"><b>1.5.36. </b>el-steps  &#x6B65;&#x9AA4;&#x6761;</a></li><li><span class="title-icon "></span><a href="#el-card--&#x5361;&#x7247;"><b>1.5.37. </b>el-card  &#x5361;&#x7247;</a></li><li><span class="title-icon "></span><a href="#el-carousel--&#x5E7B;&#x706F;&#x7247;-&#x3001;&#x8D70;&#x9A6C;&#x706F;"><b>1.5.38. </b>el-carousel  &#x5E7B;&#x706F;&#x7247; &#x3001;&#x8D70;&#x9A6C;&#x706F;</a></li></ul></ul></ul></div><a href="#element" id="anchorNavigationExGoTop"><i class="fa fa-arrow-up"></i></a><h1 id="element"><a name="element" class="anchor-navigation-ex-anchor" href="#element"><i class="fa fa-link" aria-hidden="true"></i></a>1. element</h1>
<p><a href="http://element-cn.eleme.io/#/zh-CN/component/layout" target="_blank">element</a></p>
<p><br></p>
<h2 id="element-&#x5B89;&#x88C5;"><a name="element-&#x5B89;&#x88C5;" class="anchor-navigation-ex-anchor" href="#element-&#x5B89;&#x88C5;"><i class="fa fa-link" aria-hidden="true"></i></a>1.1. element &#x5B89;&#x88C5;</h2>
<pre><code class="lang-xml">// &#x5728;&#x9879;&#x76EE;&#x6839;&#x76EE;&#x5F55;&#x4E0B;&#xFF0C;&#x5B89;&#x88C5;
npm i element-ui -S

// &#x5728;main.js&#x4E2D;
import ElementUI from &apos;element-ui&apos;
import &apos;../node_modules/element-ui/lib/theme-chalk/index.css&apos;
Vue.use(ElementUI)
</code></pre>
<table>
<thead>
<tr>
<th>&#x63A7;&#x4EF6;&#x5C5E;&#x6027;</th>
<th>&#x8BF4;&#x660E;</th>
<th>&#x5176;&#x4ED6;</th>
</tr>
</thead>
<tbody>
<tr>
<td>:span</td>
<td>&#x5217;&#x5360;&#x7528;&#x7684;&#x5217;&#x6570;</td>
<td></td>
</tr>
<tr>
<td>:gutter</td>
<td>&#x6307;&#x5B9A;&#x6BCF;&#x4E00;&#x680F;&#x4E4B;&#x95F4;&#x7684;&#x95F4;&#x9694;&#xFF0C;&#x9ED8;&#x8BA4;&#x95F4;&#x9694;&#x4E3A; 0&#x3002;</td>
</tr>
<tr>
<td>:offset</td>
<td>&#x6805;&#x683C;&#x5DE6;&#x4FA7;&#x7684;&#x95F4;&#x9694;&#x683C;&#x6570;</td>
</tr>
<tr>
<td>push</td>
<td>&#x6805;&#x683C;&#x5411;&#x53F3;&#x79FB;&#x52A8;&#x683C;&#x6570;</td>
</tr>
<tr>
<td>pull</td>
<td>&#x6805;&#x683C;&#x5411;&#x5DE6;&#x79FB;&#x52A8;&#x683C;&#x6570;</td>
</tr>
<tr>
<td>type=&quot;flex&quot;</td>
<td>&#x542F;&#x7528;flex&#x5E03;&#x5C40;</td>
</tr>
<tr>
<td>justify=&quot;center&quot;</td>
<td>&#x5B9A;&#x4E49;&#x5B50;&#x5143;&#x7D20;&#x7684;&#x6392;&#x7248;&#x65B9;&#x5F0F; &#xFF0C; start, center, end, space-between, space-around</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="element-&#x81EA;&#x5E26;&#x5B57;&#x4F53;"><a name="element-&#x81EA;&#x5E26;&#x5B57;&#x4F53;" class="anchor-navigation-ex-anchor" href="#element-&#x81EA;&#x5E26;&#x5B57;&#x4F53;"><i class="fa fa-link" aria-hidden="true"></i></a>1.2. element &#x81EA;&#x5E26;&#x5B57;&#x4F53;</h2>
<pre><code class="lang-xml">&#x4E2D;&#x6587;&#x5B57;&#x4F53; : PingFang SC &#x3001; Hiragino Sans GB &#x3001; Microsoft YaHei
&#x82F1;&#x6587;&#xFF0F;&#x6570;&#x5B57;&#x5B57;&#x4F53; &#xFF1A;Helvetica Neue &#x3001; Helvetica &#x3001; Arial

font-family: &quot;Helvetica Neue&quot;,Helvetica,&quot;PingFang SC&quot;,&quot;Hiragino Sans GB&quot;,&quot;Microsoft YaHei&quot;,&quot;&#x5FAE;&#x8F6F;&#x96C5;&#x9ED1;&quot;,Arial,sans-serif;

``




## element &#x81EA;&#x5E26;&#x7EC4;&#x4EF6;

<span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>
### &#x884C;&#x3001;&#x5217;  
```xml
<span class="hljs-tag">&lt;<span class="hljs-name">el-row</span> &gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">el-col</span>  &gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">el-col</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-col</span>  &gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">el-col</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>
</code></pre>
<p><br></p>
<h2 id="element-&#x5185;&#x7F6E;-icon"><a name="element-&#x5185;&#x7F6E;-icon" class="anchor-navigation-ex-anchor" href="#element-&#x5185;&#x7F6E;-icon"><i class="fa fa-link" aria-hidden="true"></i></a>1.3. element &#x5185;&#x7F6E; Icon</h2>
<pre><code class="lang-xml">el-icon-info
el-icon-error
el-icon-success
el-icon-warning
el-icon-question
el-icon-back
el-icon-arrow-left
el-icon-arrow-down
el-icon-arrow-right
el-icon-arrow-up
el-icon-caret-left
el-icon-caret-bottom
el-icon-caret-top
el-icon-caret-right
el-icon-d-arrow-left
el-icon-d-arrow-right
el-icon-minus
el-icon-plus
el-icon-remove
el-icon-circle-plus
el-icon-remove-outline
el-icon-circle-plus-outline
el-icon-close
el-icon-check
el-icon-circle-close
el-icon-circle-check
el-icon-circle-close-outline
el-icon-circle-check-outline
el-icon-zoom-out
el-icon-zoom-in
el-icon-d-caret
el-icon-sort
el-icon-sort-down
el-icon-sort-up
el-icon-tickets
el-icon-document
el-icon-goods
el-icon-sold-out
el-icon-news
el-icon-message
el-icon-date
el-icon-printer
el-icon-time
el-icon-bell
el-icon-mobile-phone
el-icon-service
el-icon-view
el-icon-menu
el-icon-more
el-icon-more-outline
el-icon-star-on
el-icon-star-off
el-icon-location
el-icon-location-outline
el-icon-phone
el-icon-phone-outline
el-icon-picture
el-icon-picture-outline
el-icon-delete
el-icon-search
el-icon-edit
el-icon-edit-outline
el-icon-rank
el-icon-refresh
el-icon-share
el-icon-setting
el-icon-upload
el-icon-upload2
el-icon-download
el-icon-loading
</code></pre>
<p><br></p>
<h2 id="&#x81EA;&#x52A8;&#x9002;&#x914D;-&#x9690;&#x85CF;&#x6216;&#x663E;&#x793A;"><a name="&#x81EA;&#x52A8;&#x9002;&#x914D;-&#x9690;&#x85CF;&#x6216;&#x663E;&#x793A;" class="anchor-navigation-ex-anchor" href="#&#x81EA;&#x52A8;&#x9002;&#x914D;-&#x9690;&#x85CF;&#x6216;&#x663E;&#x793A;"><i class="fa fa-link" aria-hidden="true"></i></a>1.4. &#x81EA;&#x52A8;&#x9002;&#x914D; &#x9690;&#x85CF;&#x6216;&#x663E;&#x793A;</h2>
<pre><code class="lang-xml">import &apos;element-ui/lib/theme-chalk/display.css&apos;;

hidden-xs-only - &#x5F53;&#x89C6;&#x53E3;&#x5728; xs &#x5C3A;&#x5BF8;&#x65F6;&#x9690;&#x85CF;
hidden-sm-only - &#x5F53;&#x89C6;&#x53E3;&#x5728; sm &#x5C3A;&#x5BF8;&#x65F6;&#x9690;&#x85CF;
hidden-sm-and-down - &#x5F53;&#x89C6;&#x53E3;&#x5728; sm &#x53CA;&#x4EE5;&#x4E0B;&#x5C3A;&#x5BF8;&#x65F6;&#x9690;&#x85CF;
hidden-sm-and-up - &#x5F53;&#x89C6;&#x53E3;&#x5728; sm &#x53CA;&#x4EE5;&#x4E0A;&#x5C3A;&#x5BF8;&#x65F6;&#x9690;&#x85CF;
hidden-md-only - &#x5F53;&#x89C6;&#x53E3;&#x5728; md &#x5C3A;&#x5BF8;&#x65F6;&#x9690;&#x85CF;
hidden-md-and-down - &#x5F53;&#x89C6;&#x53E3;&#x5728; md &#x53CA;&#x4EE5;&#x4E0B;&#x5C3A;&#x5BF8;&#x65F6;&#x9690;&#x85CF;
hidden-md-and-up - &#x5F53;&#x89C6;&#x53E3;&#x5728; md &#x53CA;&#x4EE5;&#x4E0A;&#x5C3A;&#x5BF8;&#x65F6;&#x9690;&#x85CF;
hidden-lg-only - &#x5F53;&#x89C6;&#x53E3;&#x5728; lg &#x5C3A;&#x5BF8;&#x65F6;&#x9690;&#x85CF;
hidden-lg-and-down - &#x5F53;&#x89C6;&#x53E3;&#x5728; lg &#x53CA;&#x4EE5;&#x4E0B;&#x5C3A;&#x5BF8;&#x65F6;&#x9690;&#x85CF;
hidden-lg-and-up - &#x5F53;&#x89C6;&#x53E3;&#x5728; lg &#x53CA;&#x4EE5;&#x4E0A;&#x5C3A;&#x5BF8;&#x65F6;&#x9690;&#x85CF;
hidden-xl-only - &#x5F53;&#x89C6;&#x53E3;&#x5728; xl &#x5C3A;&#x5BF8;&#x65F6;&#x9690;&#x85CF;
</code></pre>
<p><br></p>
<h2 id="element-&#x5185;&#x7F6E;&#x63A7;&#x4EF6;"><a name="element-&#x5185;&#x7F6E;&#x63A7;&#x4EF6;" class="anchor-navigation-ex-anchor" href="#element-&#x5185;&#x7F6E;&#x63A7;&#x4EF6;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5. element &#x5185;&#x7F6E;&#x63A7;&#x4EF6;</h2>
<h3 id="container-&#x5E03;&#x5C40;&#x5BB9;&#x5668;"><a name="container-&#x5E03;&#x5C40;&#x5BB9;&#x5668;" class="anchor-navigation-ex-anchor" href="#container-&#x5E03;&#x5C40;&#x5BB9;&#x5668;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.1. Container &#x5E03;&#x5C40;&#x5BB9;&#x5668;</h3>
<pre><code class="lang-xml"><span class="hljs-tag">&lt;<span class="hljs-name">el-container</span>&gt;</span>&#xFF1A;&#x5916;&#x5C42;&#x5BB9;&#x5668;&#x3002;
&#x5F53;&#x5B50;&#x5143;&#x7D20;&#x4E2D;&#x5305;&#x542B; <span class="hljs-tag">&lt;<span class="hljs-name">el-header</span>&gt;</span> &#x6216; <span class="hljs-tag">&lt;<span class="hljs-name">el-footer</span>&gt;</span> &#x65F6;&#xFF0C;&#x5168;&#x90E8;&#x5B50;&#x5143;&#x7D20;&#x4F1A;&#x5782;&#x76F4;&#x4E0A;&#x4E0B;&#x6392;&#x5217;&#xFF0C;&#x5426;&#x5219;&#x4F1A;&#x6C34;&#x5E73;&#x5DE6;&#x53F3;&#x6392;&#x5217;&#x3002;

<span class="hljs-tag">&lt;<span class="hljs-name">el-header</span>&gt;</span>&#xFF1A;&#x9876;&#x680F;&#x5BB9;&#x5668;&#x3002;
<span class="hljs-tag">&lt;<span class="hljs-name">el-aside</span>&gt;</span>&#xFF1A;&#x4FA7;&#x8FB9;&#x680F;&#x5BB9;&#x5668;&#x3002;
<span class="hljs-tag">&lt;<span class="hljs-name">el-main</span>&gt;</span>&#xFF1A;&#x4E3B;&#x8981;&#x533A;&#x57DF;&#x5BB9;&#x5668;&#x3002;
<span class="hljs-tag">&lt;<span class="hljs-name">el-footer</span>&gt;</span>&#xFF1A;&#x5E95;&#x680F;&#x5BB9;&#x5668;&#x3002;
</code></pre>
<h3 id="el-scrollbar--&#x6EDA;&#x52A8;&#x6761;"><a name="el-scrollbar--&#x6EDA;&#x52A8;&#x6761;" class="anchor-navigation-ex-anchor" href="#el-scrollbar--&#x6EDA;&#x52A8;&#x6761;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.2. el-scrollbar  &#x6EDA;&#x52A8;&#x6761;</h3>
<p>API&#x6587;&#x6863;&#x4E0A;&#x6CA1;&#x627E;&#x5230; &#xFF0C;&#x4F46;&#x662F;&#x6E90;&#x7801;&#x91CC;&#x6709; &#xFF0C;&#x4E5F;&#x80FD;&#x76F4;&#x63A5;&#x4F7F;&#x7528; &#x3002;</p>
<p><br></p>
<h3 id="el-submenu"><a name="el-submenu" class="anchor-navigation-ex-anchor" href="#el-submenu"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.3. el-submenu</h3>
<h2 id="">#</h2>
<p><br></p>
<h3 id="el-button-&#x6309;&#x94AE;"><a name="el-button-&#x6309;&#x94AE;" class="anchor-navigation-ex-anchor" href="#el-button-&#x6309;&#x94AE;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.4. el-button &#x6309;&#x94AE;</h3>
<pre><code class="lang-xml"> <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>&#x4E0B;&#x4E00;&#x9875;<span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;el-icon-arrow-right el-icon--right&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
</code></pre>
<table>
<thead>
<tr>
<th>Button&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;</th>
<th>&#x9ED8;&#x8BA4;&#x503C;</th>
</tr>
</thead>
<tbody>
<tr>
<td>size</td>
<td>&#x5C3A;&#x5BF8;     medium / small / mini</td>
<td>-</td>
</tr>
<tr>
<td>type</td>
<td>&#x7C7B;&#x578B;  primary  / success / warning / danger / info / text</td>
<td>-</td>
</tr>
<tr>
<td>plain</td>
<td>&#x662F;&#x5426;&#x6734;&#x7D20;&#x6309;&#x94AE;</td>
<td>false</td>
</tr>
<tr>
<td>round</td>
<td>&#x662F;&#x5426;&#x5706;&#x89D2;&#x6309;&#x94AE;</td>
<td>false</td>
</tr>
<tr>
<td>circle</td>
<td>&#x662F;&#x5426;&#x5706;&#x5F62;&#x6309;&#x94AE;</td>
<td>false</td>
</tr>
<tr>
<td>loading</td>
<td>&#x662F;&#x5426;&#x52A0;&#x8F7D;&#x4E2D;&#x72B6;&#x6001;</td>
<td>false</td>
</tr>
<tr>
<td>disabled</td>
<td>&#x662F;&#x5426;&#x7981;&#x7528;&#x72B6;&#x6001;</td>
<td>false</td>
</tr>
<tr>
<td>icon</td>
<td>&#x56FE;&#x6807;&#x7C7B;&#x540D;</td>
<td>-</td>
</tr>
<tr>
<td>autofocus</td>
<td>&#x662F;&#x5426;&#x9ED8;&#x8BA4;&#x805A;&#x7126;</td>
<td>false</td>
</tr>
<tr>
<td>native-type</td>
<td>&#x539F;&#x751F; type &#x5C5E;&#x6027;    string    button / submit / reset</td>
<td>button</td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-radio-&#x5355;&#x9009;&#x6846;"><a name="el-radio-&#x5355;&#x9009;&#x6846;" class="anchor-navigation-ex-anchor" href="#el-radio-&#x5355;&#x9009;&#x6846;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.5. el-radio &#x5355;&#x9009;&#x6846;</h3>
<pre><code class="lang-xml"> <span class="hljs-tag">&lt;<span class="hljs-name">el-radio</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>&#x5907;&#x9009;&#x9879;<span class="hljs-tag">&lt;/<span class="hljs-name">el-radio</span>&gt;</span>
</code></pre>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>label</td>
<td>Radio &#x7684; value     </td>
</tr>
<tr>
<td>disabled</td>
<td>&#x662F;&#x5426;&#x7981;&#x7528;     </td>
</tr>
<tr>
<td>border</td>
<td>&#x662F;&#x5426;&#x663E;&#x793A;&#x8FB9;&#x6846;  </td>
</tr>
<tr>
<td>size</td>
<td>Radio &#x7684;&#x5C3A;&#x5BF8;&#xFF0C;&#x4EC5;&#x5728; border &#x4E3A;&#x771F;&#x65F6;&#x6709;&#x6548;      medium / small / mini    &#x2014;</td>
</tr>
<tr>
<td>name</td>
<td>&#x539F;&#x751F; name &#x5C5E;&#x6027;     </td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-checkbox-&#x591A;&#x9009;&#x6846;"><a name="el-checkbox-&#x591A;&#x9009;&#x6846;" class="anchor-navigation-ex-anchor" href="#el-checkbox-&#x591A;&#x9009;&#x6846;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.6. el-checkbox &#x591A;&#x9009;&#x6846;</h3>
<pre><code class="lang-xml"><span class="hljs-comment">&lt;!-- `checked` &#x4E3A; true &#x6216; false --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">el-checkbox</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;checked&quot;</span>&gt;</span>&#x5907;&#x9009;&#x9879;<span class="hljs-tag">&lt;/<span class="hljs-name">el-checkbox</span>&gt;</span>
</code></pre>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>label</td>
<td>&#x9009;&#x4E2D;&#x72B6;&#x6001;&#x7684;&#x503C;&#xFF08;&#x53EA;&#x6709;&#x5728;checkbox-group&#x6216;&#x8005;&#x7ED1;&#x5B9A;&#x5BF9;&#x8C61;&#x7C7B;&#x578B;&#x4E3A;array&#x65F6;&#x6709;&#x6548;&#xFF09;     </td>
</tr>
<tr>
<td>true-label</td>
<td>&#x9009;&#x4E2D;&#x65F6;&#x7684;&#x503C;     </td>
</tr>
<tr>
<td>false-label</td>
<td>&#x6CA1;&#x6709;&#x9009;&#x4E2D;&#x65F6;&#x7684;&#x503C;     </td>
</tr>
<tr>
<td>disabled</td>
<td>&#x662F;&#x5426;&#x7981;&#x7528;     </td>
</tr>
<tr>
<td>border</td>
<td>&#x662F;&#x5426;&#x663E;&#x793A;&#x8FB9;&#x6846;     </td>
</tr>
<tr>
<td>size</td>
<td>Checkbox &#x7684;&#x5C3A;&#x5BF8;&#xFF0C;&#x4EC5;&#x5728; border &#x4E3A;&#x771F;&#x65F6;&#x6709;&#x6548;         medium / small / mini     </td>
</tr>
<tr>
<td>name</td>
<td>&#x539F;&#x751F; name &#x5C5E;&#x6027;     </td>
</tr>
<tr>
<td>checked</td>
<td>&#x5F53;&#x524D;&#x662F;&#x5426;&#x52FE;&#x9009;     </td>
</tr>
<tr>
<td>indeterminate</td>
<td>&#x8BBE;&#x7F6E; indeterminate &#x72B6;&#x6001;&#xFF0C;&#x53EA;&#x8D1F;&#x8D23;&#x6837;&#x5F0F;&#x63A7;&#x5236;     </td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-input-&#x8F93;&#x5165;&#x6846;"><a name="el-input-&#x8F93;&#x5165;&#x6846;" class="anchor-navigation-ex-anchor" href="#el-input-&#x8F93;&#x5165;&#x6846;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.7. el-input &#x8F93;&#x5165;&#x6846;</h3>
<pre><code class="lang-xml"><span class="hljs-tag">&lt;<span class="hljs-name">el-input</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;input&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;&#x8BF7;&#x8F93;&#x5165;&#x5185;&#x5BB9;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-input</span>&gt;</span>
</code></pre>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>prefix-icon</td>
<td>&#x8F93;&#x5165;&#x6846;&#x5934;&#x90E8;&#x56FE;&#x6807;</td>
</tr>
<tr>
<td>suffix-icon</td>
<td>&#x8F93;&#x5165;&#x6846;&#x5C3E;&#x90E8;&#x56FE;&#x6807;</td>
</tr>
<tr>
<td>disabled</td>
<td>&#x7981;&#x7528;</td>
</tr>
<tr>
<td>clearable</td>
<td>&#x662F;&#x5426;&#x53EF;&#x6E05;&#x7A7A;</td>
</tr>
<tr>
<td>placeholder</td>
<td>&#x8F93;&#x5165;&#x6846;&#x5360;&#x4F4D;&#x6587;&#x672C;</td>
</tr>
<tr>
<td>maxlength</td>
<td>&#x539F;&#x751F;&#x5C5E;&#x6027;&#xFF0C;&#x6700;&#x5927;&#x8F93;&#x5165;&#x957F;&#x5EA6;</td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-input-number-&#x8BA1;&#x6570;&#x5668;"><a name="el-input-number-&#x8BA1;&#x6570;&#x5668;" class="anchor-navigation-ex-anchor" href="#el-input-number-&#x8BA1;&#x6570;&#x5668;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.8. el-input-number &#x8BA1;&#x6570;&#x5668;</h3>
<pre><code class="lang-xml"> <span class="hljs-tag">&lt;<span class="hljs-name">el-input-number</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;num1&quot;</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">&quot;handleChange&quot;</span> <span class="hljs-attr">:min</span>=<span class="hljs-string">&quot;1&quot;</span> <span class="hljs-attr">:max</span>=<span class="hljs-string">&quot;10&quot;</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;&#x63CF;&#x8FF0;&#x6587;&#x5B57;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-input-number</span>&gt;</span>
</code></pre>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>min</td>
<td>&#x8BBE;&#x7F6E;&#x8BA1;&#x6570;&#x5668;&#x5141;&#x8BB8;&#x7684;&#x6700;&#x5C0F;&#x503C;</td>
</tr>
<tr>
<td>max</td>
<td>&#x8BBE;&#x7F6E;&#x8BA1;&#x6570;&#x5668;&#x5141;&#x8BB8;&#x7684;&#x6700;&#x5927;&#x503C;</td>
</tr>
<tr>
<td>step</td>
<td>&#x8BA1;&#x6570;&#x5668;&#x6B65;&#x957F;</td>
</tr>
<tr>
<td>size</td>
<td>&#x8BA1;&#x6570;&#x5668;&#x5C3A;&#x5BF8;         large,   medium&#x3001;small&#x3001;mini</td>
</tr>
<tr>
<td>disabled</td>
<td>&#x662F;&#x5426;&#x7981;&#x7528;&#x8BA1;&#x6570;&#x5668;</td>
</tr>
<tr>
<td>precision</td>
<td>&#x6570;&#x503C;&#x7CBE;&#x5EA6;  &#xFF0C; &#x5FC5;&#x987B;&#x662F;&#x4E00;&#x4E2A;&#x975E;&#x8D1F;&#x6574;&#x6570;&#xFF0C;&#x5E76;&#x4E14;&#x4E0D;&#x80FD;&#x5C0F;&#x4E8E; step &#x7684;&#x5C0F;&#x6570;&#x4F4D;&#x6570;&#x3002;</td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-select-&#x9009;&#x62E9;&#x5668;"><a name="el-select-&#x9009;&#x62E9;&#x5668;" class="anchor-navigation-ex-anchor" href="#el-select-&#x9009;&#x62E9;&#x5668;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.9. el-select &#x9009;&#x62E9;&#x5668;</h3>
<pre><code class="lang-xml"><span class="hljs-tag">&lt;<span class="hljs-name">el-select</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;value&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;&#x8BF7;&#x9009;&#x62E9;&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-option</span>
    <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;item in options&quot;</span>
    <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;item.value&quot;</span>
    <span class="hljs-attr">:label</span>=<span class="hljs-string">&quot;item.label&quot;</span>
    <span class="hljs-attr">:value</span>=<span class="hljs-string">&quot;item.value&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">el-option</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">el-select</span>&gt;</span>
</code></pre>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>multiple</td>
<td>&#x662F;&#x5426;&#x591A;&#x9009;</td>
</tr>
<tr>
<td>disabled</td>
<td>&#x662F;&#x5426;&#x7981;&#x7528;  </td>
</tr>
<tr>
<td>size</td>
<td>&#x8F93;&#x5165;&#x6846;&#x5C3A;&#x5BF8;     medium/small/mini  </td>
</tr>
<tr>
<td>clearable</td>
<td>&#x5355;&#x9009;&#x65F6;&#x662F;&#x5426;&#x53EF;&#x4EE5;&#x6E05;&#x7A7A;&#x9009;&#x9879;</td>
</tr>
<tr>
<td>collapse-tags</td>
<td>&#x591A;&#x9009;&#x65F6;&#x662F;&#x5426;&#x5C06;&#x9009;&#x4E2D;&#x503C;&#x6309;&#x6587;&#x5B57;&#x7684;&#x5F62;&#x5F0F;&#x5C55;&#x793A;</td>
</tr>
<tr>
<td>multiple-limit</td>
<td>&#x591A;&#x9009;&#x65F6;&#x7528;&#x6237;&#x6700;&#x591A;&#x53EF;&#x4EE5;&#x9009;&#x62E9;&#x7684;&#x9879;&#x76EE;&#x6570;&#xFF0C;&#x4E3A; 0 &#x5219;&#x4E0D;&#x9650;&#x5236;     </td>
</tr>
<tr>
<td>autocomplete</td>
<td>select input &#x7684; autocomplete &#x5C5E;&#x6027;     </td>
</tr>
<tr>
<td>placeholder</td>
<td>&#x5360;&#x4F4D;&#x7B26;</td>
</tr>
<tr>
<td>filterable</td>
<td>&#x662F;&#x5426;&#x53EF;&#x641C;&#x7D22;     </td>
</tr>
<tr>
<td>allow-create</td>
<td>&#x662F;&#x5426;&#x5141;&#x8BB8;&#x7528;&#x6237;&#x521B;&#x5EFA;&#x65B0;&#x6761;&#x76EE;&#xFF0C;&#x9700;&#x914D;&#x5408; filterable &#x4F7F;&#x7528;</td>
</tr>
<tr>
<td>filter-method</td>
<td>&#x81EA;&#x5B9A;&#x4E49;&#x641C;&#x7D22;&#x65B9;&#x6CD5;</td>
</tr>
<tr>
<td>remote</td>
<td>&#x662F;&#x5426;&#x4E3A;&#x8FDC;&#x7A0B;&#x641C;&#x7D22;     </td>
</tr>
<tr>
<td>remote-method</td>
<td>&#x8FDC;&#x7A0B;&#x641C;&#x7D22;&#x65B9;&#x6CD5;</td>
</tr>
<tr>
<td>loading</td>
<td>&#x662F;&#x5426;&#x6B63;&#x5728;&#x4ECE;&#x8FDC;&#x7A0B;&#x83B7;&#x53D6;&#x6570;&#x636E;     </td>
</tr>
<tr>
<td>loading-text</td>
<td>&#x8FDC;&#x7A0B;&#x52A0;&#x8F7D;&#x65F6;&#x663E;&#x793A;&#x7684;&#x6587;&#x5B57;     </td>
</tr>
<tr>
<td>no-match-text</td>
<td>&#x641C;&#x7D22;&#x6761;&#x4EF6;&#x65E0;&#x5339;&#x914D;&#x65F6;&#x663E;&#x793A;&#x7684;&#x6587;&#x5B57;</td>
</tr>
<tr>
<td>no-data-text</td>
<td>&#x9009;&#x9879;&#x4E3A;&#x7A7A;&#x65F6;&#x663E;&#x793A;&#x7684;&#x6587;&#x5B57;  </td>
</tr>
<tr>
<td>reserve-keyword</td>
<td>&#x591A;&#x9009;&#x4E14;&#x53EF;&#x641C;&#x7D22;&#x65F6;&#xFF0C;&#x662F;&#x5426;&#x5728;&#x9009;&#x4E2D;&#x4E00;&#x4E2A;&#x9009;&#x9879;&#x540E;&#x4FDD;&#x7559;&#x5F53;&#x524D;&#x7684;&#x641C;&#x7D22;&#x5173;&#x952E;&#x8BCD;     </td>
</tr>
<tr>
<td>default-first-option</td>
<td>&#x5728;&#x8F93;&#x5165;&#x6846;&#x6309;&#x4E0B;&#x56DE;&#x8F66;&#xFF0C;&#x9009;&#x62E9;&#x7B2C;&#x4E00;&#x4E2A;&#x5339;&#x914D;&#x9879;&#x3002;&#x9700;&#x914D;&#x5408; filterable &#x6216; remote &#x4F7F;&#x7528;     </td>
</tr>
<tr>
<td>popper-append-to-body</td>
<td>&#x662F;&#x5426;&#x5C06;&#x5F39;&#x51FA;&#x6846;&#x63D2;&#x5165;&#x81F3; body &#x5143;&#x7D20;&#x3002;&#x5728;&#x5F39;&#x51FA;&#x6846;&#x7684;&#x5B9A;&#x4F4D;&#x51FA;&#x73B0;&#x95EE;&#x9898;&#x65F6;&#xFF0C;&#x53EF;&#x5C06;&#x8BE5;&#x5C5E;&#x6027;&#x8BBE;&#x7F6E;&#x4E3A; false     </td>
</tr>
<tr>
<td>automatic-dropdown</td>
<td>&#x5BF9;&#x4E8E;&#x4E0D;&#x53EF;&#x641C;&#x7D22;&#x7684; Select&#xFF0C;&#x662F;&#x5426;&#x5728;&#x8F93;&#x5165;&#x6846;&#x83B7;&#x5F97;&#x7126;&#x70B9;&#x540E;&#x81EA;&#x52A8;&#x5F39;&#x51FA;&#x9009;&#x9879;&#x83DC;&#x5355;</td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-cascader-&#x7EA7;&#x8054;&#x9009;&#x62E9;&#x5668;"><a name="el-cascader-&#x7EA7;&#x8054;&#x9009;&#x62E9;&#x5668;" class="anchor-navigation-ex-anchor" href="#el-cascader-&#x7EA7;&#x8054;&#x9009;&#x62E9;&#x5668;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.10. el-cascader &#x7EA7;&#x8054;&#x9009;&#x62E9;&#x5668;</h3>
<pre><code class="lang-xml"><span class="hljs-tag">&lt;<span class="hljs-name">el-cascader</span>
    <span class="hljs-attr">:options</span>=<span class="hljs-string">&quot;options&quot;</span>
    <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;selectedOptions&quot;</span>
    @<span class="hljs-attr">change</span>=<span class="hljs-string">&quot;handleChange&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">el-cascader</span>&gt;</span>
</code></pre>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>&#x6307;&#x5B9A;&#x9009;&#x9879;&#x7684;&#x503C;&#x4E3A;&#x9009;&#x9879;&#x5BF9;&#x8C61;&#x7684;&#x67D0;&#x4E2A;&#x5C5E;&#x6027;&#x503C;     </td>
</tr>
<tr>
<td>label</td>
<td>&#x6307;&#x5B9A;&#x9009;&#x9879;&#x6807;&#x7B7E;&#x4E3A;&#x9009;&#x9879;&#x5BF9;&#x8C61;&#x7684;&#x67D0;&#x4E2A;&#x5C5E;&#x6027;&#x503C;     </td>
</tr>
<tr>
<td>children</td>
<td>&#x6307;&#x5B9A;&#x9009;&#x9879;&#x7684;&#x5B50;&#x9009;&#x9879;&#x4E3A;&#x9009;&#x9879;&#x5BF9;&#x8C61;&#x7684;&#x67D0;&#x4E2A;&#x5C5E;&#x6027;&#x503C;</td>
</tr>
<tr>
<td>disabled</td>
<td>&#x6307;&#x5B9A;&#x9009;&#x9879;&#x7684;&#x7981;&#x7528;&#x4E3A;&#x9009;&#x9879;&#x5BF9;&#x8C61;&#x7684;&#x67D0;&#x4E2A;&#x5C5E;&#x6027;&#x503C;</td>
</tr>
<tr>
<td>value</td>
<td>&#x9009;&#x4E2D;&#x9879;&#x7ED1;&#x5B9A;&#x503C;     </td>
</tr>
<tr>
<td>separator</td>
<td>&#x9009;&#x9879;&#x5206;&#x9694;&#x7B26;     </td>
</tr>
<tr>
<td>popper-class</td>
<td>&#x81EA;&#x5B9A;&#x4E49;&#x6D6E;&#x5C42;&#x7C7B;&#x540D;</td>
</tr>
<tr>
<td>placeholder</td>
<td>&#x8F93;&#x5165;&#x6846;&#x5360;&#x4F4D;&#x6587;&#x672C;     </td>
</tr>
<tr>
<td>disabled</td>
<td>&#x662F;&#x5426;&#x7981;&#x7528;</td>
</tr>
<tr>
<td>clearable</td>
<td>&#x662F;&#x5426;&#x652F;&#x6301;&#x6E05;&#x7A7A;&#x9009;&#x9879;     </td>
</tr>
<tr>
<td>expand-trigger</td>
<td>&#x6B21;&#x7EA7;&#x83DC;&#x5355;&#x7684;&#x5C55;&#x5F00;&#x65B9;&#x5F0F;     click / hover</td>
</tr>
<tr>
<td>show-all-levels</td>
<td>&#x8F93;&#x5165;&#x6846;&#x4E2D;&#x662F;&#x5426;&#x663E;&#x793A;&#x9009;&#x4E2D;&#x503C;&#x7684;&#x5B8C;&#x6574;&#x8DEF;&#x5F84;</td>
</tr>
<tr>
<td>filterable</td>
<td>&#x662F;&#x5426;&#x53EF;&#x641C;&#x7D22;&#x9009;&#x9879;     </td>
</tr>
<tr>
<td>debounce</td>
<td>&#x641C;&#x7D22;&#x5173;&#x952E;&#x8BCD;&#x8F93;&#x5165;&#x7684;&#x53BB;&#x6296;&#x5EF6;&#x8FDF;&#xFF0C;&#x6BEB;&#x79D2;</td>
</tr>
<tr>
<td>change-on-select</td>
<td>&#x662F;&#x5426;&#x5141;&#x8BB8;&#x9009;&#x62E9;&#x4EFB;&#x610F;&#x4E00;&#x7EA7;&#x7684;&#x9009;&#x9879;</td>
</tr>
<tr>
<td>size</td>
<td>&#x5C3A;&#x5BF8;     medium / small / mini     </td>
</tr>
<tr>
<td>before-filter</td>
<td>&#x7B5B;&#x9009;&#x4E4B;&#x524D;&#x7684;&#x94A9;&#x5B50;&#xFF0C;&#x53C2;&#x6570;&#x4E3A;&#x8F93;&#x5165;&#x7684;&#x503C;&#xFF0C;&#x82E5;&#x8FD4;&#x56DE; false &#x6216;&#x8005;&#x8FD4;&#x56DE; Promise &#x4E14;&#x88AB; reject&#xFF0C;&#x5219;&#x505C;&#x6B62;&#x7B5B;&#x9009;</td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-switch-&#x5F00;&#x5173;"><a name="el-switch-&#x5F00;&#x5173;" class="anchor-navigation-ex-anchor" href="#el-switch-&#x5F00;&#x5173;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.11. el-switch &#x5F00;&#x5173;</h3>
<pre><code class="lang-xml"><span class="hljs-tag">&lt;<span class="hljs-name">el-switch</span>
  <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;value2&quot;</span>
  <span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#13ce66&quot;</span>
  <span class="hljs-attr">inactive-color</span>=<span class="hljs-string">&quot;#ff4949&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">el-switch</span>&gt;</span>
</code></pre>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>disabled</td>
<td>&#x662F;&#x5426;&#x7981;&#x7528;     </td>
</tr>
<tr>
<td>width</td>
<td>&#x5BBD;&#x5EA6;&#xFF08;&#x50CF;&#x7D20;&#xFF09;     </td>
</tr>
<tr>
<td>active-icon-class</td>
<td>&#x6253;&#x5F00;&#x65F6;&#x6240;&#x663E;&#x793A;&#x56FE;&#x6807;&#x7684;&#x7C7B;&#x540D;&#xFF0C;&#x8BBE;&#x7F6E;&#x6B64;&#x9879;&#x4F1A;&#x5FFD;&#x7565; active-text     </td>
</tr>
<tr>
<td>inactive-icon-class</td>
<td>&#x5173;&#x95ED;&#x65F6;&#x6240;&#x663E;&#x793A;&#x56FE;&#x6807;&#x7684;&#x7C7B;&#x540D;&#xFF0C;&#x8BBE;&#x7F6E;&#x6B64;&#x9879;&#x4F1A;&#x5FFD;&#x7565; inactive-text  </td>
</tr>
<tr>
<td>active-text</td>
<td>&#x6253;&#x5F00;&#x65F6;&#x7684;&#x6587;&#x5B57;&#x63CF;&#x8FF0;</td>
</tr>
<tr>
<td>inactive-text</td>
<td>&#x5173;&#x95ED;&#x65F6;&#x7684;&#x6587;&#x5B57;&#x63CF;&#x8FF0;     </td>
</tr>
<tr>
<td>active-value</td>
<td>&#x6253;&#x5F00;&#x65F6;&#x7684;&#x503C;    boolean  </td>
</tr>
<tr>
<td>inactive-value</td>
<td>&#x5173;&#x95ED;&#x65F6;&#x7684;&#x503C;    boolean  </td>
</tr>
<tr>
<td>active-color</td>
<td>&#x6253;&#x5F00;&#x65F6;&#x7684;&#x80CC;&#x666F;&#x8272;  </td>
</tr>
<tr>
<td>inactive-color</td>
<td>&#x5173;&#x95ED;&#x65F6;&#x7684;&#x80CC;&#x666F;&#x8272;  </td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-slider-&#x6ED1;&#x5757;-&#x3001;&#x62D6;&#x52A8;&#x6761;"><a name="el-slider-&#x6ED1;&#x5757;-&#x3001;&#x62D6;&#x52A8;&#x6761;" class="anchor-navigation-ex-anchor" href="#el-slider-&#x6ED1;&#x5757;-&#x3001;&#x62D6;&#x52A8;&#x6761;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.12. el-slider &#x6ED1;&#x5757; &#x3001;&#x62D6;&#x52A8;&#x6761;</h3>
<pre><code class="lang-xml">  <span class="hljs-tag">&lt;<span class="hljs-name">el-slider</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;value1&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-slider</span>&gt;</span>
</code></pre>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>min</td>
<td>&#x6700;&#x5C0F;&#x503C;     </td>
</tr>
<tr>
<td>max</td>
<td>&#x6700;&#x5927;&#x503C;</td>
</tr>
<tr>
<td>disabled</td>
<td>&#x662F;&#x5426;&#x7981;&#x7528;     </td>
</tr>
<tr>
<td>step</td>
<td>&#x6B65;&#x957F;     </td>
</tr>
<tr>
<td>show-input</td>
<td>&#x662F;&#x5426;&#x663E;&#x793A;&#x8F93;&#x5165;&#x6846;&#xFF0C;&#x4EC5;&#x5728;&#x975E;&#x8303;&#x56F4;&#x9009;&#x62E9;&#x65F6;&#x6709;&#x6548;</td>
</tr>
<tr>
<td>show-input-controls</td>
<td>&#x5728;&#x663E;&#x793A;&#x8F93;&#x5165;&#x6846;&#x7684;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x662F;&#x5426;&#x663E;&#x793A;&#x8F93;&#x5165;&#x6846;&#x7684;&#x63A7;&#x5236;&#x6309;&#x94AE;</td>
</tr>
<tr>
<td>input-size</td>
<td>&#x8F93;&#x5165;&#x6846;&#x7684;&#x5C3A;&#x5BF8;         large / medium / small / mini    small</td>
</tr>
<tr>
<td>show-stops</td>
<td>&#x662F;&#x5426;&#x663E;&#x793A;&#x95F4;&#x65AD;&#x70B9;     </td>
</tr>
<tr>
<td>show-tooltip</td>
<td>&#x662F;&#x5426;&#x663E;&#x793A; tooltip     </td>
</tr>
<tr>
<td>format-tooltip</td>
<td>&#x683C;&#x5F0F;&#x5316;  </td>
</tr>
<tr>
<td>range</td>
<td>&#x662F;&#x5426;&#x4E3A;&#x8303;&#x56F4;&#x9009;&#x62E9;</td>
</tr>
<tr>
<td>vertical</td>
<td>&#x662F;&#x5426;&#x7AD6;&#x5411;&#x6A21;&#x5F0F;</td>
</tr>
<tr>
<td>height</td>
<td>&#x9AD8;&#x5EA6;&#xFF0C;&#x7AD6;&#x5411;&#x6A21;&#x5F0F;&#x65F6;&#x5FC5;&#x586B;     </td>
</tr>
<tr>
<td>label</td>
<td>&#x5C4F;&#x5E55;&#x9605;&#x8BFB;&#x5668;&#x6807;&#x7B7E;     </td>
</tr>
<tr>
<td>debounce</td>
<td>&#x8F93;&#x5165;&#x65F6;&#x7684;&#x53BB;&#x6296;&#x5EF6;&#x8FDF;&#xFF0C;&#x6BEB;&#x79D2;&#xFF0C;&#x4EC5;&#x5728;show-input&#x7B49;&#x4E8E;true&#x65F6;&#x6709;&#x6548;     </td>
</tr>
<tr>
<td>tooltip-class</td>
<td>tooltip &#x7684;&#x81EA;&#x5B9A;&#x4E49;&#x7C7B;&#x540D;     </td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-time-select--&#x65F6;&#x95F4;&#x9009;&#x62E9;&#x5668;"><a name="el-time-select--&#x65F6;&#x95F4;&#x9009;&#x62E9;&#x5668;" class="anchor-navigation-ex-anchor" href="#el-time-select--&#x65F6;&#x95F4;&#x9009;&#x62E9;&#x5668;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.13. el-time-select  &#x65F6;&#x95F4;&#x9009;&#x62E9;&#x5668;</h3>
<pre><code class="lang-xml">```
&#x53C2;&#x6570;  |     &#x8BF4;&#x660E;     
-|-
readonly    | &#x5B8C;&#x5168;&#x53EA;&#x8BFB;     
disabled    | &#x7981;&#x7528;
editable    |  &#x6587;&#x672C;&#x6846;&#x53EF;&#x8F93;&#x5165;     
clearable    |  &#x662F;&#x5426;&#x663E;&#x793A;&#x6E05;&#x9664;&#x6309;&#x94AE;     
size     |  &#x8F93;&#x5165;&#x6846;&#x5C3A;&#x5BF8;     medium / small / mini     
placeholder     |  &#x975E;&#x8303;&#x56F4;&#x9009;&#x62E9;&#x65F6;&#x7684;&#x5360;&#x4F4D;&#x5185;&#x5BB9;     
start-placeholder|      &#x8303;&#x56F4;&#x9009;&#x62E9;&#x65F6;&#x5F00;&#x59CB;&#x65E5;&#x671F;&#x7684;&#x5360;&#x4F4D;&#x5185;&#x5BB9;
end-placeholder |     &#x8303;&#x56F4;&#x9009;&#x62E9;&#x65F6;&#x5F00;&#x59CB;&#x65E5;&#x671F;&#x7684;&#x5360;&#x4F4D;&#x5185;&#x5BB9;
is-range    |  &#x662F;&#x5426;&#x4E3A;&#x65F6;&#x95F4;&#x8303;&#x56F4;&#x9009;&#x62E9;&#xFF0C;&#x4EC5;&#x5BF9;<span class="hljs-tag">&lt;<span class="hljs-name">el-time-picker</span>&gt;</span>&#x6709;&#x6548;     
arrow-control    | &#x662F;&#x5426;&#x4F7F;&#x7528;&#x7BAD;&#x5934;&#x8FDB;&#x884C;&#x65F6;&#x95F4;&#x9009;&#x62E9;&#xFF0C;&#x4EC5;&#x5BF9;<span class="hljs-tag">&lt;<span class="hljs-name">el-time-picker</span>&gt;</span>&#x6709;&#x6548;     
value    |   &#x7ED1;&#x5B9A;&#x503C;     
align    |  &#x5BF9;&#x9F50;&#x65B9;&#x5F0F;     left / center / right    left
popper-class    | TimePicker &#x4E0B;&#x62C9;&#x6846;&#x7684;&#x7C7B;&#x540D;     
picker-options|     &#x5F53;&#x524D;&#x65F6;&#x95F4;&#x65E5;&#x671F;&#x9009;&#x62E9;&#x5668;&#x7279;&#x6709;&#x7684;&#x9009;&#x9879;&#x53C2;&#x8003;&#x4E0B;&#x8868;     
range-separator     | &#x9009;&#x62E9;&#x8303;&#x56F4;&#x65F6;&#x7684;&#x5206;&#x9694;&#x7B26;     
value-format    |   &#x4EC5;TimePicker&#x65F6;&#x53EF;&#x7528;&#xFF0C;&#x7ED1;&#x5B9A;&#x503C;&#x7684;&#x683C;&#x5F0F;&#x3002;&#x4E0D;&#x6307;&#x5B9A;&#x5219;&#x7ED1;&#x5B9A;&#x503C;&#x4E3A; Date &#x5BF9;&#x8C61;    string     
default-value    | &#x9009;&#x62E9;&#x5668;&#x6253;&#x5F00;&#x65F6;&#x9ED8;&#x8BA4;&#x663E;&#x793A;&#x7684;&#x65F6;&#x95F4;
prefix-icon     | &#x81EA;&#x5B9A;&#x4E49;&#x5934;&#x90E8;&#x56FE;&#x6807;&#x7684;&#x7C7B;&#x540D;     
clear-icon    |  &#x81EA;&#x5B9A;&#x4E49;&#x6E05;&#x7A7A;&#x56FE;&#x6807;&#x7684;&#x7C7B;&#x540D;     


<span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>
###  el-date-picker  &#x65E5;&#x671F;&#x9009;&#x62E9;&#x5668;
```xml
<span class="hljs-tag">&lt;<span class="hljs-name">el-date-picker</span>
     <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;value1&quot;</span>
     <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;date&quot;</span>
     <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;&#x9009;&#x62E9;&#x65E5;&#x671F;&quot;</span>&gt;</span>
   <span class="hljs-tag">&lt;/<span class="hljs-name">el-date-picker</span>&gt;</span>
</code></pre>
<p><br></p>
<h3 id="el-date-picker---&#x65E5;&#x671F;--&#x65F6;&#x95F4;&#x9009;&#x62E9;&#x5668;"><a name="el-date-picker---&#x65E5;&#x671F;--&#x65F6;&#x95F4;&#x9009;&#x62E9;&#x5668;" class="anchor-navigation-ex-anchor" href="#el-date-picker---&#x65E5;&#x671F;--&#x65F6;&#x95F4;&#x9009;&#x62E9;&#x5668;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.14. el-date-picker   &#x65E5;&#x671F; + &#x65F6;&#x95F4;&#x9009;&#x62E9;&#x5668;</h3>
<pre><code class="lang-xml"><span class="hljs-tag">&lt;<span class="hljs-name">el-date-picker</span>
     <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;value4&quot;</span>
     <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;datetimerange&quot;</span>
     &gt;</span>
   <span class="hljs-tag">&lt;/<span class="hljs-name">el-date-picker</span>&gt;</span>
</code></pre>
<p><br></p>
<h3 id="el-upload--&#x4E0A;&#x4F20;"><a name="el-upload--&#x4E0A;&#x4F20;" class="anchor-navigation-ex-anchor" href="#el-upload--&#x4E0A;&#x4F20;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.15. el-upload  &#x4E0A;&#x4F20;</h3>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>action</td>
<td>&#x4E0A;&#x4F20;&#x7684;&#x5730;&#x5740;     </td>
</tr>
<tr>
<td>headers</td>
<td>&#x8BBE;&#x7F6E;&#x4E0A;&#x4F20;&#x7684;&#x8BF7;&#x6C42;&#x5934;&#x90E8;</td>
</tr>
<tr>
<td>multiple</td>
<td>&#x662F;&#x5426;&#x652F;&#x6301;&#x591A;&#x9009;&#x6587;&#x4EF6;</td>
</tr>
<tr>
<td>data</td>
<td>&#x4E0A;&#x4F20;&#x65F6;&#x9644;&#x5E26;&#x7684;&#x989D;&#x5916;&#x53C2;&#x6570;</td>
</tr>
<tr>
<td>name</td>
<td>&#x4E0A;&#x4F20;&#x7684;&#x6587;&#x4EF6;&#x5B57;&#x6BB5;&#x540D;</td>
</tr>
<tr>
<td>with-credentials</td>
<td>&#x652F;&#x6301;&#x53D1;&#x9001; cookie &#x51ED;&#x8BC1;&#x4FE1;&#x606F;</td>
</tr>
<tr>
<td>show-file-list</td>
<td>&#x662F;&#x5426;&#x663E;&#x793A;&#x5DF2;&#x4E0A;&#x4F20;&#x6587;&#x4EF6;&#x5217;&#x8868;     </td>
</tr>
<tr>
<td>drag</td>
<td>&#x662F;&#x5426;&#x542F;&#x7528;&#x62D6;&#x62FD;&#x4E0A;&#x4F20;</td>
</tr>
<tr>
<td>accept</td>
<td>&#x63A5;&#x53D7;&#x4E0A;&#x4F20;&#x7684;&#x6587;&#x4EF6;&#x7C7B;&#x578B;&#xFF08;thumbnail-mode &#x6A21;&#x5F0F;&#x4E0B;&#x6B64;&#x53C2;&#x6570;&#x65E0;&#x6548;&#xFF09;</td>
</tr>
<tr>
<td>on-preview</td>
<td>&#x70B9;&#x51FB;&#x6587;&#x4EF6;&#x5217;&#x8868;&#x4E2D;&#x5DF2;&#x4E0A;&#x4F20;&#x7684;&#x6587;&#x4EF6;&#x65F6;&#x7684;&#x94A9;&#x5B50;</td>
</tr>
<tr>
<td>on-remove</td>
<td>&#x6587;&#x4EF6;&#x5217;&#x8868;&#x79FB;&#x9664;&#x6587;&#x4EF6;&#x65F6;&#x7684;&#x94A9;&#x5B50;</td>
</tr>
<tr>
<td>on-success</td>
<td>&#x6587;&#x4EF6;&#x4E0A;&#x4F20;&#x6210;&#x529F;&#x65F6;&#x7684;&#x94A9;&#x5B50;     </td>
</tr>
<tr>
<td>on-error</td>
<td>&#x6587;&#x4EF6;&#x4E0A;&#x4F20;&#x5931;&#x8D25;&#x65F6;&#x7684;&#x94A9;&#x5B50;</td>
</tr>
<tr>
<td>on-progress</td>
<td>&#x6587;&#x4EF6;&#x4E0A;&#x4F20;&#x65F6;&#x7684;&#x94A9;&#x5B50;</td>
</tr>
<tr>
<td>on-change</td>
<td>&#x6587;&#x4EF6;&#x72B6;&#x6001;&#x6539;&#x53D8;&#x65F6;&#x7684;&#x94A9;&#x5B50;&#xFF0C;&#x6DFB;&#x52A0;&#x6587;&#x4EF6;&#x3001;&#x4E0A;&#x4F20;&#x6210;&#x529F;&#x548C;&#x4E0A;&#x4F20;&#x5931;&#x8D25;&#x65F6;&#x90FD;&#x4F1A;&#x88AB;&#x8C03;&#x7528;     </td>
</tr>
<tr>
<td>before-upload</td>
<td>&#x4E0A;&#x4F20;&#x6587;&#x4EF6;&#x4E4B;&#x524D;&#x7684;&#x94A9;&#x5B50;&#xFF0C;&#x53C2;&#x6570;&#x4E3A;&#x4E0A;&#x4F20;&#x7684;&#x6587;&#x4EF6;&#xFF0C;&#x82E5;&#x8FD4;&#x56DE; false &#x6216;&#x8005;&#x8FD4;&#x56DE; Promise &#x4E14;&#x88AB; reject&#xFF0C;&#x5219;&#x505C;&#x6B62;&#x4E0A;&#x4F20;&#x3002;</td>
</tr>
<tr>
<td>before-remove</td>
<td>&#x5220;&#x9664;&#x6587;&#x4EF6;&#x4E4B;&#x524D;&#x7684;&#x94A9;&#x5B50;&#xFF0C;&#x53C2;&#x6570;&#x4E3A;&#x4E0A;&#x4F20;&#x7684;&#x6587;&#x4EF6;&#x548C;&#x6587;&#x4EF6;&#x5217;&#x8868;&#xFF0C;&#x82E5;&#x8FD4;&#x56DE; false &#x6216;&#x8005;&#x8FD4;&#x56DE; Promise &#x4E14;&#x88AB; reject&#xFF0C;&#x5219;&#x505C;&#x6B62;&#x4E0A;&#x4F20;</td>
</tr>
<tr>
<td>list-type</td>
<td>&#x6587;&#x4EF6;&#x5217;&#x8868;&#x7684;&#x7C7B;&#x578B;         text/picture/picture-card     </td>
</tr>
<tr>
<td>auto-upload</td>
<td>&#x662F;&#x5426;&#x5728;&#x9009;&#x53D6;&#x6587;&#x4EF6;&#x540E;&#x7ACB;&#x5373;&#x8FDB;&#x884C;&#x4E0A;&#x4F20;</td>
</tr>
<tr>
<td>file-list</td>
<td>&#x4E0A;&#x4F20;&#x7684;&#x6587;&#x4EF6;&#x5217;&#x8868;</td>
</tr>
<tr>
<td>http-request</td>
<td>&#x8986;&#x76D6;&#x9ED8;&#x8BA4;&#x7684;&#x4E0A;&#x4F20;&#x884C;&#x4E3A;&#xFF0C;&#x53EF;&#x4EE5;&#x81EA;&#x5B9A;&#x4E49;&#x4E0A;&#x4F20;&#x7684;&#x5B9E;&#x73B0;     </td>
</tr>
<tr>
<td>disabled</td>
<td>&#x662F;&#x5426;&#x7981;&#x7528;     </td>
</tr>
<tr>
<td>limit</td>
<td>&#x6700;&#x5927;&#x5141;&#x8BB8;&#x4E0A;&#x4F20;&#x4E2A;&#x6570;     </td>
</tr>
<tr>
<td>on-exceed</td>
<td>&#x6587;&#x4EF6;&#x8D85;&#x51FA;&#x4E2A;&#x6570;&#x9650;&#x5236;&#x65F6;&#x7684;&#x94A9;&#x5B50;</td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-rate-&#x8BC4;&#x5206;"><a name="el-rate-&#x8BC4;&#x5206;" class="anchor-navigation-ex-anchor" href="#el-rate-&#x8BC4;&#x5206;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.16. el-rate &#x8BC4;&#x5206;</h3>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>max</td>
<td>&#x6700;&#x5927;&#x5206;&#x503C;</td>
</tr>
<tr>
<td>disabled</td>
<td>&#x662F;&#x5426;&#x4E3A;&#x53EA;&#x8BFB;</td>
</tr>
<tr>
<td>allow-half</td>
<td>&#x662F;&#x5426;&#x5141;&#x8BB8;&#x534A;&#x9009;</td>
</tr>
<tr>
<td>low-threshold</td>
<td>&#x4F4E;&#x5206;&#x548C;&#x4E2D;&#x7B49;&#x5206;&#x6570;&#x7684;&#x754C;&#x9650;&#x503C;&#xFF0C;&#x503C;&#x672C;&#x8EAB;&#x88AB;&#x5212;&#x5206;&#x5728;&#x4F4E;&#x5206;&#x4E2D;</td>
</tr>
<tr>
<td>high-threshold</td>
<td>&#x9AD8;&#x5206;&#x548C;&#x4E2D;&#x7B49;&#x5206;&#x6570;&#x7684;&#x754C;&#x9650;&#x503C;&#xFF0C;&#x503C;&#x672C;&#x8EAB;&#x88AB;&#x5212;&#x5206;&#x5728;&#x9AD8;&#x5206;&#x4E2D;</td>
</tr>
<tr>
<td>colors</td>
<td>icon &#x7684;&#x989C;&#x8272;&#x6570;&#x7EC4;&#xFF0C;&#x5171;&#x6709; 3 &#x4E2A;&#x5143;&#x7D20;&#xFF0C;&#x4E3A; 3 &#x4E2A;&#x5206;&#x6BB5;&#x6240;&#x5BF9;&#x5E94;&#x7684;&#x989C;&#x8272;     </td>
</tr>
<tr>
<td>void-color</td>
<td>&#x672A;&#x9009;&#x4E2D; icon &#x7684;&#x989C;&#x8272;     </td>
</tr>
<tr>
<td>disabled-void-color</td>
<td>&#x53EA;&#x8BFB;&#x65F6;&#x672A;&#x9009;&#x4E2D; icon &#x7684;&#x989C;&#x8272;</td>
</tr>
<tr>
<td>icon-classes</td>
<td>icon &#x7684;&#x7C7B;&#x540D;&#x6570;&#x7EC4;&#xFF0C;&#x5171;&#x6709; 3 &#x4E2A;&#x5143;&#x7D20;&#xFF0C;&#x4E3A; 3 &#x4E2A;&#x5206;&#x6BB5;&#x6240;&#x5BF9;&#x5E94;&#x7684;&#x7C7B;&#x540D;</td>
</tr>
<tr>
<td>void-icon-class</td>
<td>&#x672A;&#x9009;&#x4E2D; icon &#x7684;&#x7C7B;&#x540D;     </td>
</tr>
<tr>
<td>disabled-void-icon-class</td>
<td>&#x53EA;&#x8BFB;&#x65F6;&#x672A;&#x9009;&#x4E2D; icon &#x7684;&#x7C7B;&#x540D;</td>
</tr>
<tr>
<td>show-text</td>
<td>&#x662F;&#x5426;&#x663E;&#x793A;&#x8F85;&#x52A9;&#x6587;&#x5B57;&#xFF0C;&#x82E5;&#x4E3A;&#x771F;&#xFF0C;&#x5219;&#x4F1A;&#x4ECE; texts &#x6570;&#x7EC4;&#x4E2D;&#x9009;&#x53D6;&#x5F53;&#x524D;&#x5206;&#x6570;&#x5BF9;&#x5E94;&#x7684;&#x6587;&#x5B57;&#x5185;&#x5BB9;</td>
</tr>
<tr>
<td>show-score</td>
<td>&#x662F;&#x5426;&#x663E;&#x793A;&#x5F53;&#x524D;&#x5206;&#x6570;&#xFF0C;show-score &#x548C; show-text &#x4E0D;&#x80FD;&#x540C;&#x65F6;&#x4E3A;&#x771F;</td>
</tr>
<tr>
<td>text-color</td>
<td>&#x8F85;&#x52A9;&#x6587;&#x5B57;&#x7684;&#x989C;&#x8272;     </td>
</tr>
<tr>
<td>texts</td>
<td>&#x8F85;&#x52A9;&#x6587;&#x5B57;&#x6570;&#x7EC4;</td>
</tr>
<tr>
<td>score-template</td>
<td>&#x5206;&#x6570;&#x663E;&#x793A;&#x6A21;&#x677F;</td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-color-picker-&#x989C;&#x8272;&#x9009;&#x62E9;&#x5668;"><a name="el-color-picker-&#x989C;&#x8272;&#x9009;&#x62E9;&#x5668;" class="anchor-navigation-ex-anchor" href="#el-color-picker-&#x989C;&#x8272;&#x9009;&#x62E9;&#x5668;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.17. el-color-picker &#x989C;&#x8272;&#x9009;&#x62E9;&#x5668;</h3>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>disabled</td>
<td>&#x662F;&#x5426;&#x7981;&#x7528;</td>
</tr>
<tr>
<td>size</td>
<td>&#x5C3A;&#x5BF8; medium / small / mini</td>
</tr>
<tr>
<td>show-alpha</td>
<td>&#x662F;&#x5426;&#x652F;&#x6301;&#x900F;&#x660E;&#x5EA6;&#x9009;&#x62E9;</td>
</tr>
<tr>
<td>color-format</td>
<td>&#x5199;&#x5165; v-model &#x7684;&#x989C;&#x8272;&#x7684;&#x683C;&#x5F0F; hsl / hsv / hex / rgb    hex&#xFF08;show-alpha &#x4E3A; false&#xFF09;/ rgb&#xFF08;show-alpha &#x4E3A; true&#xFF09;</td>
</tr>
<tr>
<td>popper-class</td>
<td>ColorPicker &#x4E0B;&#x62C9;&#x6846;&#x7684;&#x7C7B;&#x540D;     </td>
</tr>
<tr>
<td>predefine</td>
<td>&#x9884;&#x5B9A;&#x4E49;&#x989C;&#x8272;</td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-transfer-&#x7A7F;&#x68AD;&#x6846;"><a name="el-transfer-&#x7A7F;&#x68AD;&#x6846;" class="anchor-navigation-ex-anchor" href="#el-transfer-&#x7A7F;&#x68AD;&#x6846;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.18. el-transfer &#x7A7F;&#x68AD;&#x6846;</h3>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>&#x6570;&#x636E;&#x6E90;</td>
</tr>
<tr>
<td>filterable</td>
<td>&#x662F;&#x5426;&#x53EF;&#x641C;&#x7D22;</td>
</tr>
<tr>
<td>filter-placeholder</td>
<td>&#x641C;&#x7D22;&#x6846;&#x5360;&#x4F4D;&#x7B26;</td>
</tr>
<tr>
<td>filter-method</td>
<td>&#x81EA;&#x5B9A;&#x4E49;&#x641C;&#x7D22;&#x65B9;&#x6CD5;</td>
</tr>
<tr>
<td>target-order</td>
<td>&#x53F3;&#x4FA7;&#x5217;&#x8868;&#x5143;&#x7D20;&#x7684;&#x6392;&#x5E8F;&#x7B56;&#x7565;</td>
</tr>
<tr>
<td>titles</td>
<td>&#x81EA;&#x5B9A;&#x4E49;&#x5217;&#x8868;&#x6807;&#x9898;</td>
</tr>
<tr>
<td>button-texts</td>
<td>&#x81EA;&#x5B9A;&#x4E49;&#x6309;&#x94AE;&#x6587;&#x6848;</td>
</tr>
<tr>
<td>render-content</td>
<td>&#x81EA;&#x5B9A;&#x4E49;&#x6570;&#x636E;&#x9879;&#x6E32;&#x67D3;&#x51FD;&#x6570;</td>
</tr>
<tr>
<td>format</td>
<td>&#x5217;&#x8868;&#x9876;&#x90E8;&#x52FE;&#x9009;&#x72B6;&#x6001;&#x6587;&#x6848;</td>
</tr>
<tr>
<td>props</td>
<td>&#x6570;&#x636E;&#x6E90;&#x7684;&#x5B57;&#x6BB5;&#x522B;&#x540D;</td>
</tr>
<tr>
<td>left-default-checked</td>
<td>&#x521D;&#x59CB;&#x72B6;&#x6001;&#x4E0B;&#x5DE6;&#x4FA7;&#x5217;&#x8868;&#x7684;&#x5DF2;&#x52FE;&#x9009;&#x9879;&#x7684; key &#x6570;&#x7EC4;</td>
</tr>
<tr>
<td>right-default-checked</td>
<td>&#x521D;&#x59CB;&#x72B6;&#x6001;&#x4E0B;&#x53F3;&#x4FA7;&#x5217;&#x8868;&#x7684;&#x5DF2;&#x52FE;&#x9009;&#x9879;&#x7684; key &#x6570;&#x7EC4;</td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-form--&#x8868;&#x5355;"><a name="el-form--&#x8868;&#x5355;" class="anchor-navigation-ex-anchor" href="#el-form--&#x8868;&#x5355;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.19. el-form  &#x8868;&#x5355;</h3>
<p>&#x7531;&#x8F93;&#x5165;&#x6846;&#x3001;&#x9009;&#x62E9;&#x5668;&#x3001; &#x7B49;&#x63A7;&#x4EF6;&#x7EC4;&#x6210;&#xFF0C;&#x7528;&#x4EE5;&#x6536;&#x96C6;&#x3001;&#x6821;&#x9A8C;&#x3001;&#x63D0;&#x4EA4;&#x6570;&#x636E;</p>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>&#x8868;&#x5355;&#x6570;&#x636E;&#x5BF9;&#x8C61;</td>
</tr>
<tr>
<td>rules</td>
<td>&#x8868;&#x5355;&#x9A8C;&#x8BC1;&#x89C4;&#x5219;</td>
</tr>
<tr>
<td>inline</td>
<td>&#x884C;&#x5185;&#x8868;&#x5355;&#x6A21;&#x5F0F;     </td>
</tr>
<tr>
<td>label-position</td>
<td>&#x8868;&#x5355;&#x57DF;&#x6807;&#x7B7E;&#x7684;&#x4F4D;&#x7F6E;&#xFF0C;&#x5982;&#x679C;&#x503C;&#x4E3A; left &#x6216;&#x8005; right &#x65F6;&#xFF0C;&#x5219;&#x9700;&#x8981;&#x8BBE;&#x7F6E; label-width</td>
</tr>
<tr>
<td>label-width</td>
<td>&#x8868;&#x5355;&#x57DF;&#x6807;&#x7B7E;&#x7684;&#x5BBD;&#x5EA6;&#xFF0C;&#x4F5C;&#x4E3A; Form &#x76F4;&#x63A5;&#x5B50;&#x5143;&#x7D20;&#x7684; form-item &#x4F1A;&#x7EE7;&#x627F;&#x8BE5;&#x503C;     </td>
</tr>
<tr>
<td>label-suffix</td>
<td>&#x8868;&#x5355;&#x57DF;&#x6807;&#x7B7E;&#x7684;&#x540E;&#x7F00;     </td>
</tr>
<tr>
<td>hide-required-asterisk</td>
<td>&#x662F;&#x5426;&#x663E;&#x793A;&#x5FC5;&#x586B;&#x5B57;&#x6BB5;&#x7684;&#x6807;&#x7B7E;&#x65C1;&#x8FB9;&#x7684;&#x7EA2;&#x8272;&#x661F;&#x53F7;</td>
</tr>
<tr>
<td>show-message</td>
<td>&#x662F;&#x5426;&#x663E;&#x793A;&#x6821;&#x9A8C;&#x9519;&#x8BEF;&#x4FE1;&#x606F;     </td>
</tr>
<tr>
<td>inline-message</td>
<td>&#x662F;&#x5426;&#x4EE5;&#x884C;&#x5185;&#x5F62;&#x5F0F;&#x5C55;&#x793A;&#x6821;&#x9A8C;&#x4FE1;&#x606F;     </td>
</tr>
<tr>
<td>status-icon</td>
<td>&#x662F;&#x5426;&#x5728;&#x8F93;&#x5165;&#x6846;&#x4E2D;&#x663E;&#x793A;&#x6821;&#x9A8C;&#x7ED3;&#x679C;&#x53CD;&#x9988;&#x56FE;&#x6807;</td>
</tr>
<tr>
<td>validate-on-rule-change</td>
<td>&#x662F;&#x5426;&#x5728; rules &#x5C5E;&#x6027;&#x6539;&#x53D8;&#x540E;&#x7ACB;&#x5373;&#x89E6;&#x53D1;&#x4E00;&#x6B21;&#x9A8C;&#x8BC1;     </td>
</tr>
<tr>
<td>size</td>
<td>&#x7528;&#x4E8E;&#x63A7;&#x5236;&#x8BE5;&#x8868;&#x5355;&#x5185;&#x7EC4;&#x4EF6;&#x7684;&#x5C3A;&#x5BF8;         medium / small / mini     </td>
</tr>
<tr>
<td>disabled</td>
<td>&#x662F;&#x5426;&#x7981;&#x7528;&#x8BE5;&#x8868;&#x5355;&#x5185;&#x7684;&#x6240;&#x6709;&#x7EC4;&#x4EF6;&#x3002;&#x82E5;&#x8BBE;&#x7F6E;&#x4E3A; true&#xFF0C;&#x5219;&#x8868;&#x5355;&#x5185;&#x7EC4;&#x4EF6;&#x4E0A;&#x7684; disabled &#x5C5E;&#x6027;&#x4E0D;&#x518D;&#x751F;&#x6548;     </td>
</tr>
<tr>
<td>validate</td>
<td>&#x5BF9;&#x6574;&#x4E2A;&#x8868;&#x5355;&#x8FDB;&#x884C;&#x6821;&#x9A8C;&#x7684;&#x65B9;&#x6CD5;&#xFF0C;&#x53C2;&#x6570;&#x4E3A;&#x4E00;&#x4E2A;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#x3002;</td>
</tr>
<tr>
<td>validateField</td>
<td>&#x5BF9;&#x90E8;&#x5206;&#x8868;&#x5355;&#x5B57;&#x6BB5;&#x8FDB;&#x884C;&#x6821;&#x9A8C;&#x7684;&#x65B9;&#x6CD5;     </td>
</tr>
<tr>
<td>resetFields</td>
<td>&#x5BF9;&#x6574;&#x4E2A;&#x8868;&#x5355;&#x8FDB;&#x884C;&#x91CD;&#x7F6E;</td>
</tr>
<tr>
<td>clearValidate</td>
<td>&#x79FB;&#x9664;&#x8868;&#x5355;&#x9879;&#x7684;&#x6821;&#x9A8C;&#x7ED3;&#x679C;</td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-table-&#x8868;&#x683C;"><a name="el-table-&#x8868;&#x683C;" class="anchor-navigation-ex-anchor" href="#el-table-&#x8868;&#x683C;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.20. el-table &#x8868;&#x683C;</h3>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>&#x663E;&#x793A;&#x7684;&#x6570;&#x636E;     </td>
</tr>
<tr>
<td>height</td>
<td>&#x7684;&#x9AD8;&#x5EA6;&#xFF0C;&#x9ED8;&#x8BA4;&#x4E3A;&#x81EA;&#x52A8;&#x9AD8;&#x5EA6;&#x3002;</td>
</tr>
<tr>
<td>max-height</td>
<td>&#x6700;&#x5927;&#x9AD8;&#x5EA6;</td>
</tr>
<tr>
<td>stripe</td>
<td>&#x662F;&#x5426;&#x4E3A;&#x6591;&#x9A6C;&#x7EB9;  </td>
</tr>
<tr>
<td>border</td>
<td>&#x662F;&#x5426;&#x5E26;&#x6709;&#x7EB5;&#x5411;&#x8FB9;&#x6846;</td>
</tr>
<tr>
<td>size</td>
<td>&#x5C3A;&#x5BF8;         medium / small / mini     </td>
</tr>
<tr>
<td>fit</td>
<td>&#x5217;&#x7684;&#x5BBD;&#x5EA6;&#x662F;&#x5426;&#x81EA;&#x6491;&#x5F00;</td>
</tr>
<tr>
<td>show-header</td>
<td>&#x662F;&#x5426;&#x663E;&#x793A;&#x8868;&#x5934;     </td>
</tr>
<tr>
<td>highlight-current-row</td>
<td>&#x662F;&#x5426;&#x8981;&#x9AD8;&#x4EAE;&#x5F53;&#x524D;&#x884C;     </td>
</tr>
<tr>
<td>current-row-key</td>
<td>&#x5F53;&#x524D;&#x884C;&#x7684; key&#xFF0C;&#x53EA;&#x5199;&#x5C5E;&#x6027;</td>
</tr>
<tr>
<td>row-class-name</td>
<td>&#x884C;&#x7684; className &#x7684;&#x56DE;&#x8C03;&#x65B9;&#x6CD5;</td>
</tr>
<tr>
<td>row-style</td>
<td>&#x884C;&#x7684; style &#x7684;&#x56DE;&#x8C03;&#x65B9;&#x6CD5;</td>
</tr>
<tr>
<td>cell-class-name</td>
<td>&#x5355;&#x5143;&#x683C;&#x7684; className &#x7684;&#x56DE;&#x8C03;&#x65B9;&#x6CD5;</td>
</tr>
<tr>
<td>cell-style</td>
<td>&#x5355;&#x5143;&#x683C;&#x7684; style &#x7684;&#x56DE;&#x8C03;&#x65B9;&#x6CD5;</td>
</tr>
<tr>
<td>header-row-class-name</td>
<td>&#x8868;&#x5934;&#x884C;&#x7684; className &#x7684;&#x56DE;&#x8C03;&#x65B9;&#x6CD5;</td>
</tr>
<tr>
<td>header-row-style</td>
<td>&#x8868;&#x5934;&#x884C;&#x7684; style &#x7684;&#x56DE;&#x8C03;&#x65B9;&#x6CD5;</td>
</tr>
<tr>
<td>header-cell-class-name</td>
<td>&#x8868;&#x5934;&#x5355;&#x5143;&#x683C;&#x7684; className &#x7684;&#x56DE;&#x8C03;&#x65B9;&#x6CD5;</td>
</tr>
<tr>
<td>header-cell-style</td>
<td>&#x8868;&#x5934;&#x5355;&#x5143;&#x683C;&#x7684; style &#x7684;&#x56DE;&#x8C03;&#x65B9;&#x6CD5;</td>
</tr>
<tr>
<td>row-key</td>
<td>&#x884C;&#x6570;&#x636E;&#x7684; Key&#xFF0C;&#x7528;&#x6765;&#x4F18;&#x5316; Table &#x7684;&#x6E32;&#x67D3;</td>
</tr>
<tr>
<td>empty-text</td>
<td>&#x7A7A;&#x6570;&#x636E;&#x65F6;&#x663E;&#x793A;&#x7684;&#x6587;&#x672C;&#x5185;&#x5BB9;&#xFF0C;&#x4E5F;&#x53EF;&#x4EE5;&#x901A;&#x8FC7; slot=&quot;empty&quot; &#x8BBE;&#x7F6E;     </td>
</tr>
<tr>
<td>default-expand-all</td>
<td>&#x662F;&#x5426;&#x9ED8;&#x8BA4;&#x5C55;&#x5F00;&#x6240;&#x6709;&#x884C;&#xFF0C;&#x5F53; Table &#x4E2D;&#x5B58;&#x5728; type=&quot;expand&quot; &#x7684; Column &#x7684;&#x65F6;&#x5019;&#x6709;&#x6548;     </td>
</tr>
<tr>
<td>expand-row-keys</td>
<td>&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x8BE5;&#x5C5E;&#x6027;&#x8BBE;&#x7F6E; Table &#x76EE;&#x524D;&#x7684;&#x5C55;&#x5F00;&#x884C;&#xFF0C;&#x9700;&#x8981;&#x8BBE;&#x7F6E; row-key &#x5C5E;&#x6027;&#x624D;&#x80FD;&#x4F7F;&#x7528;&#xFF0C;&#x8BE5;&#x5C5E;&#x6027;&#x4E3A;&#x5C55;&#x5F00;&#x884C;&#x7684; keys &#x6570;&#x7EC4;</td>
</tr>
<tr>
<td>default-sort</td>
<td>&#x9ED8;&#x8BA4;&#x7684;&#x6392;&#x5E8F;&#x5217;&#x7684; prop &#x548C;&#x987A;&#x5E8F;&#x3002;</td>
</tr>
<tr>
<td>tooltip-effect</td>
<td>tooltip effect &#x5C5E;&#x6027;     </td>
</tr>
<tr>
<td>show-summary</td>
<td>&#x662F;&#x5426;&#x5728;&#x8868;&#x5C3E;&#x663E;&#x793A;&#x5408;&#x8BA1;&#x884C;     </td>
</tr>
<tr>
<td>sum-text</td>
<td>&#x5408;&#x8BA1;&#x884C;&#x7B2C;&#x4E00;&#x5217;&#x7684;&#x6587;&#x672C;</td>
</tr>
<tr>
<td>summary-method</td>
<td>&#x81EA;&#x5B9A;&#x4E49;&#x7684;&#x5408;&#x8BA1;&#x8BA1;&#x7B97;&#x65B9;&#x6CD5;     </td>
</tr>
<tr>
<td>span-method</td>
<td>&#x5408;&#x5E76;&#x884C;&#x6216;&#x5217;&#x7684;&#x8BA1;&#x7B97;&#x65B9;&#x6CD5;</td>
</tr>
<tr>
<td>select-on-indeterminate</td>
<td>&#x5728;&#x591A;&#x9009;&#x8868;&#x683C;&#x4E2D;&#xFF0C;&#x5F53;&#x4EC5;&#x6709;&#x90E8;&#x5206;&#x884C;&#x88AB;&#x9009;&#x4E2D;&#x65F6;&#xFF0C;&#x70B9;&#x51FB;&#x8868;&#x5934;&#x7684;&#x591A;&#x9009;&#x6846;&#x65F6;&#x7684;&#x884C;&#x4E3A;&#x3002;&#x82E5;&#x4E3A; true&#xFF0C;&#x5219;&#x9009;&#x4E2D;&#x6240;&#x6709;&#x884C;&#xFF1B;&#x82E5;&#x4E3A; false&#xFF0C;&#x5219;&#x53D6;&#x6D88;&#x9009;&#x62E9;&#x6240;&#x6709;&#x884C;</td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-tag-&#x6807;&#x7B7E;"><a name="el-tag-&#x6807;&#x7B7E;" class="anchor-navigation-ex-anchor" href="#el-tag-&#x6807;&#x7B7E;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.21. el-tag &#x6807;&#x7B7E;</h3>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>type</td>
<td>&#x4E3B;&#x9898;     success/info/warning/danger     </td>
</tr>
<tr>
<td>closable</td>
<td>&#x662F;&#x5426;&#x53EF;&#x5173;&#x95ED;</td>
</tr>
<tr>
<td>disable-transitions</td>
<td>&#x662F;&#x5426;&#x7981;&#x7528;&#x6E10;&#x53D8;&#x52A8;&#x753B;     </td>
</tr>
<tr>
<td>hit</td>
<td>&#x662F;&#x5426;&#x6709;&#x8FB9;&#x6846;&#x63CF;&#x8FB9;     </td>
</tr>
<tr>
<td>color</td>
<td>&#x80CC;&#x666F;&#x8272;     </td>
</tr>
<tr>
<td>size</td>
<td>&#x5C3A;&#x5BF8;         medium / small / mini     </td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-progress-&#x8FDB;&#x5EA6;&#x6761;"><a name="el-progress-&#x8FDB;&#x5EA6;&#x6761;" class="anchor-navigation-ex-anchor" href="#el-progress-&#x8FDB;&#x5EA6;&#x6761;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.22. el-progress &#x8FDB;&#x5EA6;&#x6761;</h3>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>percentage</td>
<td>&#x767E;&#x5206;&#x6BD4;</td>
</tr>
<tr>
<td>type</td>
<td>&#x8FDB;&#x5EA6;&#x6761;&#x7C7B;&#x578B;         line/circle    line</td>
</tr>
<tr>
<td>stroke-width</td>
<td>&#x8FDB;&#x5EA6;&#x6761;&#x7684;&#x5BBD;&#x5EA6;&#xFF0C;&#x5355;&#x4F4D; px     </td>
</tr>
<tr>
<td>text-inside</td>
<td>&#x8FDB;&#x5EA6;&#x6761;&#x663E;&#x793A;&#x6587;&#x5B57;&#x5185;&#x7F6E;&#x5728;&#x8FDB;&#x5EA6;&#x6761;&#x5185;&#xFF08;&#x53EA;&#x5728; type=line &#x65F6;&#x53EF;&#x7528;&#xFF09;</td>
</tr>
<tr>
<td>status</td>
<td>&#x8FDB;&#x5EA6;&#x6761;&#x5F53;&#x524D;&#x72B6;&#x6001;         success/exception</td>
</tr>
<tr>
<td>color</td>
<td>&#x8FDB;&#x5EA6;&#x6761;&#x80CC;&#x666F;&#x8272;&#xFF08;&#x4F1A;&#x8986;&#x76D6; status &#x72B6;&#x6001;&#x989C;&#x8272;&#xFF09;     </td>
</tr>
<tr>
<td>width</td>
<td>&#x73AF;&#x5F62;&#x8FDB;&#x5EA6;&#x6761;&#x753B;&#x5E03;&#x5BBD;&#x5EA6;&#xFF08;&#x53EA;&#x5728; type=circle &#x65F6;&#x53EF;&#x7528;&#xFF09;</td>
</tr>
<tr>
<td>show-text</td>
<td>&#x662F;&#x5426;&#x663E;&#x793A;&#x8FDB;&#x5EA6;&#x6761;&#x6587;&#x5B57;&#x5185;&#x5BB9;     </td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-tree--&#x6811;&#x5F62;&#x63A7;&#x4EF6;-&#x3001;&#x591A;&#x7EA7;&#x6298;&#x53E0;"><a name="el-tree--&#x6811;&#x5F62;&#x63A7;&#x4EF6;-&#x3001;&#x591A;&#x7EA7;&#x6298;&#x53E0;" class="anchor-navigation-ex-anchor" href="#el-tree--&#x6811;&#x5F62;&#x63A7;&#x4EF6;-&#x3001;&#x591A;&#x7EA7;&#x6298;&#x53E0;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.23. el-tree  &#x6811;&#x5F62;&#x63A7;&#x4EF6; &#x3001;&#x591A;&#x7EA7;&#x6298;&#x53E0;</h3>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>&#x5C55;&#x793A;&#x6570;&#x636E;</td>
</tr>
<tr>
<td>empty-text</td>
<td>&#x5185;&#x5BB9;&#x4E3A;&#x7A7A;&#x7684;&#x65F6;&#x5019;&#x5C55;&#x793A;&#x7684;&#x6587;&#x672C;</td>
</tr>
<tr>
<td>node-key</td>
<td>&#x6BCF;&#x4E2A;&#x6811;&#x8282;&#x70B9;&#x7528;&#x6765;&#x4F5C;&#x4E3A;&#x552F;&#x4E00;&#x6807;&#x8BC6;&#x7684;&#x5C5E;&#x6027;&#xFF0C;&#x6574;&#x68F5;&#x6811;&#x5E94;&#x8BE5;&#x662F;&#x552F;&#x4E00;&#x7684;  </td>
</tr>
<tr>
<td>render-after-expand</td>
<td>&#x662F;&#x5426;&#x5728;&#x7B2C;&#x4E00;&#x6B21;&#x5C55;&#x5F00;&#x67D0;&#x4E2A;&#x6811;&#x8282;&#x70B9;&#x540E;&#x624D;&#x6E32;&#x67D3;&#x5176;&#x5B50;&#x8282;&#x70B9;</td>
</tr>
<tr>
<td>load</td>
<td>&#x52A0;&#x8F7D;&#x5B50;&#x6811;&#x6570;&#x636E;&#x7684;&#x65B9;&#x6CD5;&#xFF0C;&#x4EC5;&#x5F53; lazy &#x5C5E;&#x6027;&#x4E3A;true &#x65F6;&#x751F;&#x6548;     </td>
</tr>
<tr>
<td>render-content</td>
<td>&#x6811;&#x8282;&#x70B9;&#x7684;&#x5185;&#x5BB9;&#x533A;&#x7684;&#x6E32;&#x67D3;  </td>
</tr>
<tr>
<td>highlight-current</td>
<td>&#x662F;&#x5426;&#x9AD8;&#x4EAE;&#x5F53;&#x524D;&#x9009;&#x4E2D;&#x8282;&#x70B9;</td>
</tr>
<tr>
<td>default-expand-all</td>
<td>&#x662F;&#x5426;&#x9ED8;&#x8BA4;&#x5C55;&#x5F00;&#x6240;&#x6709;&#x8282;&#x70B9;     </td>
</tr>
<tr>
<td>expand-on-click-node</td>
<td>&#x662F;&#x5426;&#x5728;&#x70B9;&#x51FB;&#x8282;&#x70B9;&#x7684;&#x65F6;&#x5019;&#x5C55;&#x5F00;&#x6216;&#x8005;&#x6536;&#x7F29;&#x8282;&#x70B9;&#xFF0C; &#x9ED8;&#x8BA4;&#x503C;&#x4E3A; true&#xFF0C;&#x5982;&#x679C;&#x4E3A; false&#xFF0C;&#x5219;&#x53EA;&#x6709;&#x70B9;&#x7BAD;&#x5934;&#x56FE;&#x6807;&#x7684;&#x65F6;&#x5019;&#x624D;&#x4F1A;&#x5C55;&#x5F00;&#x6216;&#x8005;&#x6536;&#x7F29;&#x8282;&#x70B9;&#x3002;     </td>
</tr>
<tr>
<td>check-on-click-node</td>
<td>&#x662F;&#x5426;&#x5728;&#x70B9;&#x51FB;&#x8282;&#x70B9;&#x7684;&#x65F6;&#x5019;&#x9009;&#x4E2D;&#x8282;&#x70B9;&#xFF0C;&#x9ED8;&#x8BA4;&#x503C;&#x4E3A; false&#xFF0C;&#x5373;&#x53EA;&#x6709;&#x5728;&#x70B9;&#x51FB;&#x590D;&#x9009;&#x6846;&#x65F6;&#x624D;&#x4F1A;&#x9009;&#x4E2D;&#x8282;&#x70B9;&#x3002;</td>
</tr>
<tr>
<td>auto-expand-parent</td>
<td>&#x5C55;&#x5F00;&#x5B50;&#x8282;&#x70B9;&#x7684;&#x65F6;&#x5019;&#x662F;&#x5426;&#x81EA;&#x52A8;&#x5C55;&#x5F00;&#x7236;&#x8282;&#x70B9;     </td>
</tr>
<tr>
<td>default-expanded-keys</td>
<td>&#x9ED8;&#x8BA4;&#x5C55;&#x5F00;&#x7684;&#x8282;&#x70B9;&#x7684; key &#x7684;&#x6570;&#x7EC4;     </td>
</tr>
<tr>
<td>show-checkbox</td>
<td>&#x8282;&#x70B9;&#x662F;&#x5426;&#x53EF;&#x88AB;&#x9009;&#x62E9;     </td>
</tr>
<tr>
<td>check-strictly</td>
<td>&#x5728;&#x663E;&#x793A;&#x590D;&#x9009;&#x6846;&#x7684;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x662F;&#x5426;&#x4E25;&#x683C;&#x7684;&#x9075;&#x5FAA;&#x7236;&#x5B50;&#x4E0D;&#x4E92;&#x76F8;&#x5173;&#x8054;&#x7684;&#x505A;&#x6CD5;</td>
</tr>
<tr>
<td>default-checked-keys</td>
<td>&#x9ED8;&#x8BA4;&#x52FE;&#x9009;&#x7684;&#x8282;&#x70B9;&#x7684; key &#x7684;&#x6570;&#x7EC4;</td>
</tr>
<tr>
<td>filter-node-method</td>
<td>&#x5BF9;&#x6811;&#x8282;&#x70B9;&#x8FDB;&#x884C;&#x7B5B;&#x9009;&#x65F6;&#x6267;&#x884C;&#x7684;&#x65B9;&#x6CD5;&#xFF0C;&#x8FD4;&#x56DE; true &#x8868;&#x793A;&#x8FD9;&#x4E2A;&#x8282;&#x70B9;&#x53EF;&#x4EE5;&#x663E;&#x793A;&#xFF0C;&#x8FD4;&#x56DE; false &#x5219;&#x8868;&#x793A;&#x8FD9;&#x4E2A;&#x8282;&#x70B9;&#x4F1A;&#x88AB;&#x9690;&#x85CF;     </td>
</tr>
<tr>
<td>accordion</td>
<td>&#x662F;&#x5426;&#x6BCF;&#x6B21;&#x53EA;&#x6253;&#x5F00;&#x4E00;&#x4E2A;&#x540C;&#x7EA7;&#x6811;&#x8282;&#x70B9;&#x5C55;&#x5F00;     </td>
</tr>
<tr>
<td>indent</td>
<td>&#x76F8;&#x90BB;&#x7EA7;&#x8282;&#x70B9;&#x95F4;&#x7684;&#x6C34;&#x5E73;&#x7F29;&#x8FDB;&#xFF0C;&#x5355;&#x4F4D;&#x4E3A;&#x50CF;&#x7D20;     </td>
</tr>
<tr>
<td>lazy</td>
<td>&#x662F;&#x5426;&#x61D2;&#x52A0;&#x8F7D;&#x5B50;&#x8282;&#x70B9;&#xFF0C;&#x9700;&#x4E0E; load &#x65B9;&#x6CD5;&#x7ED3;&#x5408;&#x4F7F;&#x7528;     </td>
</tr>
<tr>
<td>draggable</td>
<td>&#x662F;&#x5426;&#x5F00;&#x542F;&#x62D6;&#x62FD;&#x8282;&#x70B9;&#x529F;&#x80FD;     </td>
</tr>
<tr>
<td>allow-drag</td>
<td>&#x5224;&#x65AD;&#x8282;&#x70B9;&#x80FD;&#x5426;&#x88AB;&#x62D6;&#x62FD;     </td>
</tr>
<tr>
<td>allow-drop</td>
<td>&#x62D6;&#x62FD;&#x65F6;&#x5224;&#x5B9A;&#x76EE;&#x6807;&#x8282;&#x70B9;&#x80FD;&#x5426;&#x88AB;&#x653E;&#x7F6E;&#x3002;type &#x53C2;&#x6570;&#x6709;&#x4E09;&#x79CD;&#x60C5;&#x51B5;&#xFF1A;&apos;prev&apos;&#x3001;&apos;inner&apos; &#x548C; &apos;next&apos;&#xFF0C; <br>  &#x5206;&#x522B;&#x8868;&#x793A;&#x653E;&#x7F6E;&#x5728;&#x76EE;&#x6807;&#x8282;&#x70B9;&#x524D;&#x3001;&#x63D2;&#x5165;&#x81F3;&#x76EE;&#x6807;&#x8282;&#x70B9;&#x548C;&#x653E;&#x7F6E;&#x5728;&#x76EE;&#x6807;&#x8282;&#x70B9;&#x540E;     </td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-collapse-&#x6298;&#x53E0;&#x9762;&#x677F;"><a name="el-collapse-&#x6298;&#x53E0;&#x9762;&#x677F;" class="anchor-navigation-ex-anchor" href="#el-collapse-&#x6298;&#x53E0;&#x9762;&#x677F;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.24. el-collapse &#x6298;&#x53E0;&#x9762;&#x677F;</h3>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>accordion</td>
<td>&#x662F;&#x5426;&#x624B;&#x98CE;&#x7434;&#x6A21;&#x5F0F;     </td>
</tr>
<tr>
<td>value</td>
<td>&#x5F53;&#x524D;&#x6FC0;&#x6D3B;&#x7684;&#x9762;&#x677F;(&#x5982;&#x679C;&#x662F;&#x624B;&#x98CE;&#x7434;&#x6A21;&#x5F0F;&#xFF0C;&#x7ED1;&#x5B9A;&#x503C;&#x7C7B;&#x578B;&#x9700;&#x8981;&#x4E3A;string&#xFF0C;&#x5426;&#x5219;&#x4E3A;array)     </td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-pagination--&#x5206;&#x9875;"><a name="el-pagination--&#x5206;&#x9875;" class="anchor-navigation-ex-anchor" href="#el-pagination--&#x5206;&#x9875;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.25. el-pagination  &#x5206;&#x9875;</h3>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>small</td>
<td>&#x662F;&#x5426;&#x4F7F;&#x7528;&#x5C0F;&#x578B;&#x5206;&#x9875;&#x6837;&#x5F0F;     </td>
</tr>
<tr>
<td>background</td>
<td>&#x662F;&#x5426;&#x4E3A;&#x5206;&#x9875;&#x6309;&#x94AE;&#x6DFB;&#x52A0;&#x80CC;&#x666F;&#x8272;     </td>
</tr>
<tr>
<td>page-size</td>
<td>&#x6BCF;&#x9875;&#x663E;&#x793A;&#x6761;&#x76EE;&#x4E2A;&#x6570;&#xFF0C;&#x652F;&#x6301; .sync &#x4FEE;&#x9970;&#x7B26;</td>
</tr>
<tr>
<td>total</td>
<td>&#x603B;&#x6761;&#x76EE;&#x6570;     </td>
</tr>
<tr>
<td>page-count</td>
<td>&#x603B;&#x9875;&#x6570;  </td>
</tr>
<tr>
<td>pager-count</td>
<td>&#x9875;&#x7801;&#x6309;&#x94AE;&#x7684;&#x6570;&#x91CF;</td>
</tr>
<tr>
<td>current-page</td>
<td>&#x5F53;&#x524D;&#x9875;&#x6570;</td>
</tr>
<tr>
<td>layout</td>
<td>&#x7EC4;&#x4EF6;&#x5E03;&#x5C40;&#xFF0C;&#x5B50;&#x7EC4;&#x4EF6;&#x540D;&#x7528;&#x9017;&#x53F7;&#x5206;&#x9694;</td>
</tr>
<tr>
<td>page-sizes</td>
<td>&#x6BCF;&#x9875;&#x663E;&#x793A;&#x4E2A;&#x6570;&#x9009;&#x62E9;&#x5668;&#x7684;&#x9009;&#x9879;&#x8BBE;&#x7F6E;     </td>
</tr>
<tr>
<td>popper-class</td>
<td>&#x6BCF;&#x9875;&#x663E;&#x793A;&#x4E2A;&#x6570;&#x9009;&#x62E9;&#x5668;&#x7684;&#x4E0B;&#x62C9;&#x6846;&#x7C7B;&#x540D;     </td>
</tr>
<tr>
<td>prev-text</td>
<td>&#x66FF;&#x4EE3;&#x56FE;&#x6807;&#x663E;&#x793A;&#x7684;&#x4E0A;&#x4E00;&#x9875;&#x6587;&#x5B57;     </td>
</tr>
<tr>
<td>next-text</td>
<td>&#x66FF;&#x4EE3;&#x56FE;&#x6807;&#x663E;&#x793A;&#x7684;&#x4E0B;&#x4E00;&#x9875;&#x6587;&#x5B57;     </td>
</tr>
<tr>
<td>disabled</td>
<td>&#x662F;&#x5426;&#x7981;&#x7528;    boolean     </td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-badge--&#x6807;&#x8BB0;--&#x3001;&#x7EA2;&#x70B9;&#x63D0;&#x793A;"><a name="el-badge--&#x6807;&#x8BB0;--&#x3001;&#x7EA2;&#x70B9;&#x63D0;&#x793A;" class="anchor-navigation-ex-anchor" href="#el-badge--&#x6807;&#x8BB0;--&#x3001;&#x7EA2;&#x70B9;&#x63D0;&#x793A;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.26. el-badge  &#x6807;&#x8BB0;  &#x3001;&#x7EA2;&#x70B9;&#x63D0;&#x793A;</h3>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>&#x663E;&#x793A;&#x503C;</td>
</tr>
<tr>
<td>max</td>
<td>&#x6700;&#x5927;&#x503C;&#xFF0C;&#x8D85;&#x8FC7;&#x6700;&#x5927;&#x503C;&#x4F1A;&#x663E;&#x793A; &apos;{max}+&apos;&#xFF0C;</td>
</tr>
<tr>
<td>is-dot</td>
<td>&#x5C0F;&#x5706;&#x70B9;</td>
</tr>
<tr>
<td>hidden</td>
<td>&#x9690;&#x85CF; badge     </td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-alert-&#x6587;&#x672C;-&#x63D0;&#x793A;&#x4FE1;&#x606F;"><a name="el-alert-&#x6587;&#x672C;-&#x63D0;&#x793A;&#x4FE1;&#x606F;" class="anchor-navigation-ex-anchor" href="#el-alert-&#x6587;&#x672C;-&#x63D0;&#x793A;&#x4FE1;&#x606F;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.27. el-alert &#x6587;&#x672C; &#x63D0;&#x793A;&#x4FE1;&#x606F;</h3>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>title</td>
<td>&#x6807;&#x9898;</td>
</tr>
<tr>
<td>type</td>
<td>&#x4E3B;&#x9898;     success/warning/info/error     </td>
</tr>
<tr>
<td>description</td>
<td>&#x8F85;&#x52A9;&#x6027;&#x6587;&#x5B57;&#x3002;&#x4E5F;&#x53EF;&#x901A;&#x8FC7;&#x9ED8;&#x8BA4; slot &#x4F20;&#x5165;     </td>
</tr>
<tr>
<td>closable</td>
<td>&#x662F;&#x5426;&#x53EF;&#x5173;&#x95ED;     </td>
</tr>
<tr>
<td>center</td>
<td>&#x6587;&#x5B57;&#x662F;&#x5426;&#x5C45;&#x4E2D;     </td>
</tr>
<tr>
<td>close-text</td>
<td>&#x5173;&#x95ED;&#x6309;&#x94AE;&#x81EA;&#x5B9A;&#x4E49;&#x6587;&#x672C;     </td>
</tr>
<tr>
<td>show-icon</td>
<td>&#x662F;&#x5426;&#x663E;&#x793A;&#x56FE;&#x6807;     </td>
</tr>
</tbody>
</table>
<h3 id="el-dialog-&#x5BF9;&#x8BDD;&#x6846;"><a name="el-dialog-&#x5BF9;&#x8BDD;&#x6846;" class="anchor-navigation-ex-anchor" href="#el-dialog-&#x5BF9;&#x8BDD;&#x6846;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.28. el-dialog &#x5BF9;&#x8BDD;&#x6846;</h3>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>visible</td>
<td>&#x662F;&#x5426;&#x663E;&#x793A; Dialog</td>
</tr>
<tr>
<td>title</td>
<td>&#x6807;&#x9898;&#xFF0C;&#x4E5F;&#x53EF;&#x901A;&#x8FC7; slot  &#x4F20;&#x5165;</td>
</tr>
<tr>
<td>width</td>
<td>&#x5BBD;&#x5EA6;     </td>
</tr>
<tr>
<td>fullscreen</td>
<td>&#x662F;&#x5426;&#x4E3A;&#x5168;&#x5C4F;  </td>
</tr>
<tr>
<td>top</td>
<td>margin-top  </td>
</tr>
<tr>
<td>modal</td>
<td>&#x662F;&#x5426;&#x9700;&#x8981;&#x906E;&#x7F69;&#x5C42;     </td>
</tr>
<tr>
<td>modal-append-to-body</td>
<td>&#x906E;&#x7F69;&#x5C42;&#x662F;&#x5426;&#x63D2;&#x5165;&#x81F3; body &#x5143;&#x7D20;&#x4E0A;&#xFF0C;&#x82E5;&#x4E3A; false&#xFF0C;&#x5219;&#x906E;&#x7F69;&#x5C42;&#x4F1A;&#x63D2;&#x5165;&#x81F3; Dialog &#x7684;&#x7236;&#x5143;&#x7D20;&#x4E0A;</td>
</tr>
<tr>
<td>append-to-body</td>
<td>Dialog &#x81EA;&#x8EAB;&#x662F;&#x5426;&#x63D2;&#x5165;&#x81F3; body &#x5143;&#x7D20;&#x4E0A;&#x3002;&#x5D4C;&#x5957;&#x7684; Dialog &#x5FC5;&#x987B;&#x6307;&#x5B9A;&#x8BE5;&#x5C5E;&#x6027;&#x5E76;&#x8D4B;&#x503C;&#x4E3A; true     </td>
</tr>
<tr>
<td>lock-scroll</td>
<td>&#x662F;&#x5426;&#x5728; Dialog &#x51FA;&#x73B0;&#x65F6;&#x5C06; body &#x6EDA;&#x52A8;&#x9501;&#x5B9A;     </td>
</tr>
<tr>
<td>custom-class</td>
<td>Dialog &#x7684;&#x81EA;&#x5B9A;&#x4E49;&#x7C7B;&#x540D;     </td>
</tr>
<tr>
<td>close-on-click-modal</td>
<td>&#x662F;&#x5426;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x70B9;&#x51FB; modal &#x5173;&#x95ED;  </td>
</tr>
<tr>
<td>close-on-press-escape</td>
<td>&#x662F;&#x5426;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x6309;&#x4E0B; ESC &#x5173;&#x95ED;  </td>
</tr>
<tr>
<td>show-close</td>
<td>&#x662F;&#x5426;&#x663E;&#x793A;&#x5173;&#x95ED;&#x6309;&#x94AE;     </td>
</tr>
<tr>
<td>before-close</td>
<td>&#x5173;&#x95ED;&#x524D;&#x7684;&#x56DE;&#x8C03;</td>
</tr>
<tr>
<td>center</td>
<td>&#x662F;&#x5426;&#x5BF9;&#x5934;&#x90E8;&#x548C;&#x5E95;&#x90E8;&#x91C7;&#x7528;&#x5C45;&#x4E2D;&#x5E03;&#x5C40;</td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-tooltip--&#x6587;&#x5B57;&#x63D0;&#x793A;"><a name="el-tooltip--&#x6587;&#x5B57;&#x63D0;&#x793A;" class="anchor-navigation-ex-anchor" href="#el-tooltip--&#x6587;&#x5B57;&#x63D0;&#x793A;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.29. el-tooltip  &#x6587;&#x5B57;&#x63D0;&#x793A;</h3>
<pre><code>&#x53C2;&#x6570;  |     &#x8BF4;&#x660E;     
-|-
effect     | &#x9ED8;&#x8BA4;&#x63D0;&#x4F9B;&#x7684;&#x4E3B;&#x9898;     dark/light     
content     | &#x663E;&#x793A;&#x7684;&#x5185;&#x5BB9;&#xFF0C;&#x4E5F;&#x53EF;&#x4EE5;&#x901A;&#x8FC7; slot#content &#x4F20;&#x5165;
placement     |  &#x51FA;&#x73B0;&#x4F4D;&#x7F6E;         top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end     
value(v-model) |     &#x72B6;&#x6001;&#x662F;&#x5426;&#x53EF;&#x89C1;
disabled |     Tooltip &#x662F;&#x5426;&#x53EF;&#x7528;     
offset     | &#x51FA;&#x73B0;&#x4F4D;&#x7F6E;&#x7684;&#x504F;&#x79FB;&#x91CF;     
transition     | &#x5B9A;&#x4E49;&#x6E10;&#x53D8;&#x52A8;&#x753B;          el-fade-in-linear
visible-arrow     | &#x662F;&#x5426;&#x663E;&#x793A; Tooltip &#x7BAD;&#x5934;
popper-options |     popper.js &#x7684;&#x53C2;&#x6570;    Object     
open-delay |     &#x5EF6;&#x8FDF;&#x51FA;&#x73B0;&#xFF0C;&#x5355;&#x4F4D;&#x6BEB;&#x79D2;
manual     | &#x624B;&#x52A8;&#x63A7;&#x5236;&#x6A21;&#x5F0F;&#xFF0C;&#x8BBE;&#x7F6E;&#x4E3A; true &#x540E;&#xFF0C;mouseenter &#x548C; mouseleave &#x4E8B;&#x4EF6;&#x5C06;&#x4E0D;&#x4F1A;&#x751F;&#x6548;
popper-class |     &#x4E3A; Tooltip &#x7684; popper &#x6DFB;&#x52A0;&#x7C7B;&#x540D;     
enterable     | &#x9F20;&#x6807;&#x662F;&#x5426;&#x53EF;&#x8FDB;&#x5165;&#x5230; tooltip &#x4E2D;    Boolean     
hide-after |     Tooltip &#x51FA;&#x73B0;&#x540E;&#x81EA;&#x52A8;&#x9690;&#x85CF;&#x5EF6;&#x65F6;&#xFF0C;&#x5355;&#x4F4D;&#x6BEB;&#x79D2;&#xFF0C;&#x4E3A; 0 &#x5219;&#x4E0D;&#x4F1A;&#x81EA;&#x52A8;&#x9690;&#x85CF;


&lt;br&gt;
### el-popover &#x5F39;&#x51FA;&#x6846;
&#x53C2;&#x6570;  |     &#x8BF4;&#x660E;     
-|-
trigger    | &#x89E6;&#x53D1;&#x65B9;&#x5F0F;         click/focus/hover/manual
title|     &#x6807;&#x9898;
content    | &#x663E;&#x793A;&#x7684;&#x5185;&#x5BB9;&#xFF0C;&#x4E5F;&#x53EF;&#x4EE5;&#x901A;&#x8FC7; slot &#x4F20;&#x5165;  
width    | &#x5BBD;&#x5EA6;
placement    | &#x51FA;&#x73B0;&#x4F4D;&#x7F6E; top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end     
disabled|      &#x662F;&#x5426;&#x53EF;&#x7528;
value(v-model)|     &#x72B6;&#x6001;&#x662F;&#x5426;&#x53EF;&#x89C1;     
offset|     &#x51FA;&#x73B0;&#x4F4D;&#x7F6E;&#x7684;&#x504F;&#x79FB;&#x91CF;     
transition|     &#x5B9A;&#x4E49;&#x6E10;&#x53D8;&#x52A8;&#x753B;         fade-in-linear
visible-arrow    | &#x662F;&#x5426;&#x663E;&#x793A; Tooltip &#x7BAD;&#x5934;
popper-options    | popper.js &#x7684;&#x53C2;&#x6570;    Object
popper-class|     &#x4E3A; popper &#x6DFB;&#x52A0;&#x7C7B;&#x540D;     
open-delay|     &#x89E6;&#x53D1;&#x65B9;&#x5F0F;&#x4E3A; hover &#x65F6;&#x7684;&#x663E;&#x793A;&#x5EF6;&#x8FDF;&#xFF0C;&#x5355;&#x4F4D;&#x4E3A;&#x6BEB;&#x79D2;


&lt;br&gt;
### this.$message  &#x5934;&#x90E8;&#x6D88;&#x606F;&#x63D0;&#x793A;
&#x53C2;&#x6570;  |     &#x8BF4;&#x660E;     
-|-
message     | &#x6D88;&#x606F;&#x6587;&#x5B57;    string / VNode     
type |     &#x4E3B;&#x9898;         success/warning/info/error     
iconClass     | &#x81EA;&#x5B9A;&#x4E49;&#x56FE;&#x6807;&#x7684;&#x7C7B;&#x540D;&#xFF0C;&#x4F1A;&#x8986;&#x76D6; type
dangerouslyUseHTMLString |     &#x662F;&#x5426;&#x5C06; message &#x5C5E;&#x6027;&#x4F5C;&#x4E3A; HTML &#x7247;&#x6BB5;&#x5904;&#x7406;
customClass     | &#x81EA;&#x5B9A;&#x4E49;&#x7C7B;&#x540D;     
duration     | &#x663E;&#x793A;&#x65F6;&#x95F4;, &#x6BEB;&#x79D2;&#x3002;&#x8BBE;&#x4E3A; 0 &#x5219;&#x4E0D;&#x4F1A;&#x81EA;&#x52A8;&#x5173;&#x95ED;     
showClose     | &#x662F;&#x5426;&#x663E;&#x793A;&#x5173;&#x95ED;&#x6309;&#x94AE;     
center |     &#x6587;&#x5B57;&#x662F;&#x5426;&#x5C45;&#x4E2D;   
onClose     | &#x5173;&#x95ED;&#x65F6;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;, &#x53C2;&#x6570;&#x4E3A;&#x88AB;&#x5173;&#x95ED;&#x7684; message &#x5B9E;&#x4F8B;





&lt;br&gt;
###  &#x5F39;&#x7A97;
&#x4ECE;&#x573A;&#x666F;&#x4E0A;&#x8BF4;&#xFF0C;MessageBox &#x7684;&#x4F5C;&#x7528;&#x662F;&#x7F8E;&#x5316;&#x7CFB;&#x7EDF;&#x81EA;&#x5E26;&#x7684; alert&#x3001;confirm &#x548C; prompt&#xFF0C;&#x56E0;&#x6B64;&#x9002;&#x5408;&#x5C55;&#x793A;&#x8F83;&#x4E3A;&#x7B80;&#x5355;&#x7684;&#x5185;&#x5BB9;&#x3002;
&#x5982;&#x679C;&#x9700;&#x8981;&#x5F39;&#x51FA;&#x8F83;&#x4E3A;&#x590D;&#x6742;&#x7684;&#x5185;&#x5BB9;&#xFF0C;&#x8BF7;&#x4F7F;&#x7528; Dialog&#x3002;
```xml
 this.$alert ...
 $confirm ...
 this.$prompt...
</code></pre><table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>title</td>
<td>&#x6807;&#x9898;     </td>
</tr>
<tr>
<td>message</td>
<td>&#x6D88;&#x606F;&#x6B63;&#x6587;&#x5185;&#x5BB9;     </td>
</tr>
<tr>
<td>dangerouslyUseHTMLString</td>
<td>&#x662F;&#x5426;&#x5C06; message &#x5C5E;&#x6027;&#x4F5C;&#x4E3A; HTML &#x7247;&#x6BB5;&#x5904;&#x7406;     </td>
</tr>
<tr>
<td>type</td>
<td>&#x6D88;&#x606F;&#x7C7B;&#x578B;&#xFF0C;&#x7528;&#x4E8E;&#x663E;&#x793A;&#x56FE;&#x6807;         success / info / warning / error     </td>
</tr>
<tr>
<td>iconClass</td>
<td>&#x81EA;&#x5B9A;&#x4E49;&#x56FE;&#x6807;&#x7684;&#x7C7B;&#x540D;&#xFF0C;&#x4F1A;&#x8986;&#x76D6; type    string    &#x2014;    &#x2014;</td>
</tr>
</tbody>
</table>
<p>customCl &#x81EA;&#x5B9A;&#x4E49;&#x7C7B;&#x540D;
callback    |  &#x82E5;&#x4E0D;&#x4F7F;&#x7528; Promise&#xFF0C;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x6B64;&#x53C2;&#x6570;&#x6307;&#x5B9A; MessageBox &#x5173;&#x95ED;&#x540E;&#x7684;&#x56DE;&#x8C03;
showClose    |  &#x662F;&#x5426;&#x663E;&#x793A;&#x53F3;&#x4E0A;&#x89D2;&#x5173;&#x95ED;&#x6309;&#x94AE;
beforeClose    |  &#x5173;&#x95ED;&#x524D;&#x7684;&#x56DE;&#x8C03;&#xFF0C;&#x4F1A;&#x6682;&#x505C;&#x5B9E;&#x4F8B;&#x7684;&#x5173;&#x95ED;<br>distinguishCancelAndClose    |  &#x662F;&#x5426;&#x5C06;&#x53D6;&#x6D88;&#xFF08;&#x70B9;&#x51FB;&#x53D6;&#x6D88;&#x6309;&#x94AE;&#xFF09;&#x4E0E;&#x5173;&#x95ED;&#xFF08;&#x70B9;&#x51FB;&#x5173;&#x95ED;&#x6309;&#x94AE;&#x6216;&#x906E;&#x7F69;&#x5C42;&#x3001;&#x6309;&#x4E0B; ESC &#x952E;&#xFF09;&#x8FDB;&#x884C;&#x533A;&#x5206;
lockScroll    |  &#x662F;&#x5426;&#x5728; MessageBox &#x51FA;&#x73B0;&#x65F6;&#x5C06; body &#x6EDA;&#x52A8;&#x9501;&#x5B9A;
showCancelButton    |  &#x662F;&#x5426;&#x663E;&#x793A;&#x53D6;&#x6D88;&#x6309;&#x94AE;
showConfirmButton    | &#x662F;&#x5426;&#x663E;&#x793A;&#x786E;&#x5B9A;&#x6309;&#x94AE;
cancelButtonText|     &#x53D6;&#x6D88;&#x6309;&#x94AE;&#x7684;&#x6587;&#x672C;&#x5185;&#x5BB9;<br>confirmButtonText    |  &#x786E;&#x5B9A;&#x6309;&#x94AE;&#x7684;&#x6587;&#x672C;&#x5185;&#x5BB9;
cancelButtonClass    | &#x53D6;&#x6D88;&#x6309;&#x94AE;&#x7684;&#x81EA;&#x5B9A;&#x4E49;&#x7C7B;&#x540D; |
confirmButtonClass    | &#x786E;&#x5B9A;&#x6309;&#x94AE;&#x7684;&#x81EA;&#x5B9A;&#x4E49;&#x7C7B;&#x540D;<br>closeOnClickModal    |  &#x662F;&#x5426;&#x53EF;&#x901A;&#x8FC7;&#x70B9;&#x51FB;&#x906E;&#x7F69;&#x5173;&#x95ED;<br>closeOnPressEscape    |  &#x662F;&#x5426;&#x53EF;&#x901A;&#x8FC7;&#x6309;&#x4E0B; ESC &#x952E;&#x5173;&#x95ED; |
closeOnHashChange    |  &#x662F;&#x5426;&#x5728; hashchange &#x65F6;&#x5173;&#x95ED; &#x5F39;&#x7A97;<br>showInput    |  &#x662F;&#x5426;&#x663E;&#x793A;&#x8F93;&#x5165;&#x6846;
inputPlaceholder|     &#x8F93;&#x5165;&#x6846;&#x7684;&#x5360;&#x4F4D;&#x7B26;<br>inputType    |  &#x8F93;&#x5165;&#x6846;&#x7684;&#x7C7B;&#x578B;<br>inputValue    |  &#x8F93;&#x5165;&#x6846;&#x7684;&#x521D;&#x59CB;&#x6587;&#x672C;
inputPattern    |  &#x8F93;&#x5165;&#x6846;&#x7684;&#x6821;&#x9A8C;&#x8868;&#x8FBE;&#x5F0F;
inputValidator|     &#x8F93;&#x5165;&#x6846;&#x7684;&#x6821;&#x9A8C;&#x51FD;&#x6570;&#x3002;
inputErrorMessage    |  &#x6821;&#x9A8C;&#x672A;&#x901A;&#x8FC7;&#x65F6;&#x7684;&#x63D0;&#x793A;&#x6587;&#x672C;
center    |  &#x662F;&#x5426;&#x5C45;&#x4E2D;&#x5E03;&#x5C40;
roundButton    |  &#x662F;&#x5426;&#x4F7F;&#x7528;&#x5706;&#x89D2;&#x6309;&#x94AE;     </p>
<p><br></p>
<h3 id="thisnotify-&#x901A;&#x77E5;"><a name="thisnotify-&#x901A;&#x77E5;" class="anchor-navigation-ex-anchor" href="#thisnotify-&#x901A;&#x77E5;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.30. this.$notify &#x901A;&#x77E5;</h3>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>title</td>
<td>&#x6807;&#x9898;    string    &#x2014;    &#x2014;</td>
</tr>
<tr>
<td>message</td>
<td>&#x8BF4;&#x660E;&#x6587;&#x5B57;    string/Vue.VNode</td>
</tr>
<tr>
<td>dangerouslyUseHTMLString</td>
<td>&#x662F;&#x5426;&#x5C06; message &#x5C5E;&#x6027;&#x4F5C;&#x4E3A; HTML &#x7247;&#x6BB5;&#x5904;&#x7406;</td>
</tr>
<tr>
<td>type</td>
<td>&#x4E3B;&#x9898;&#x6837;&#x5F0F;&#xFF0C;&#x5982;&#x679C;&#x4E0D;&#x5728;&#x53EF;&#x9009;&#x503C;&#x5185;&#x5C06;&#x88AB;&#x5FFD;&#x7565;         success/warning/info/error     </td>
</tr>
<tr>
<td>iconClass</td>
<td>&#x81EA;&#x5B9A;&#x4E49;&#x56FE;&#x6807;&#x7684;&#x7C7B;&#x540D;&#x3002;&#x82E5;&#x8BBE;&#x7F6E;&#x4E86; type&#xFF0C;&#x5219; iconClass &#x4F1A;&#x88AB;&#x8986;&#x76D6;</td>
</tr>
<tr>
<td>customClass</td>
<td>&#x81EA;&#x5B9A;&#x4E49;&#x7C7B;&#x540D;</td>
</tr>
<tr>
<td>duration</td>
<td>&#x663E;&#x793A;&#x65F6;&#x95F4;, &#x6BEB;&#x79D2;&#x3002;&#x8BBE;&#x4E3A; 0 &#x5219;&#x4E0D;&#x4F1A;&#x81EA;&#x52A8;&#x5173;&#x95ED;</td>
</tr>
<tr>
<td>position</td>
<td>&#x81EA;&#x5B9A;&#x4E49;&#x5F39;&#x51FA;&#x4F4D;&#x7F6E;         top-right/top-left/bottom-right/bottom-left     </td>
</tr>
<tr>
<td>showClose</td>
<td>&#x662F;&#x5426;&#x663E;&#x793A;&#x5173;&#x95ED;&#x6309;&#x94AE;     </td>
</tr>
<tr>
<td>onClose</td>
<td>&#x5173;&#x95ED;&#x65F6;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;     </td>
</tr>
<tr>
<td>onClick</td>
<td>&#x70B9;&#x51FB; Notification &#x65F6;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;</td>
</tr>
<tr>
<td>offset</td>
<td>&#x504F;&#x79FB;&#x7684;&#x8DDD;&#x79BB;&#xFF0C;&#x5728;&#x540C;&#x4E00;&#x65F6;&#x523B;&#xFF0C;&#x6240;&#x6709;&#x7684; Notification &#x5B9E;&#x4F8B;&#x5E94;&#x5F53;&#x5177;&#x6709;&#x4E00;&#x4E2A;&#x76F8;&#x540C;&#x7684;&#x504F;&#x79FB;&#x91CF;</td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="v-loading-&#x52A0;&#x8F7D;"><a name="v-loading-&#x52A0;&#x8F7D;" class="anchor-navigation-ex-anchor" href="#v-loading-&#x52A0;&#x8F7D;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.31. v-loading &#x52A0;&#x8F7D;</h3>
<p><code>xml</code>
&#x53C2;&#x6570;  |     &#x8BF4;&#x660E;<br>-|-
target |     Loading &#x9700;&#x8981;&#x8986;&#x76D6;&#x7684; DOM &#x8282;&#x70B9;&#x3002;
body     | &#x540C; v-loading &#x6307;&#x4EE4;&#x4E2D;&#x7684; body &#x4FEE;&#x9970;&#x7B26;
fullscreen |     &#x540C; v-loading &#x6307;&#x4EE4;&#x4E2D;&#x7684; fullscreen &#x4FEE;&#x9970;&#x7B26;<br>lock | &#x540C; v-loading &#x6307;&#x4EE4;&#x4E2D;&#x7684; lock &#x4FEE;&#x9970;&#x7B26;
text     | &#x663E;&#x793A;&#x5728;&#x52A0;&#x8F7D;&#x56FE;&#x6807;&#x4E0B;&#x65B9;&#x7684;&#x52A0;&#x8F7D;&#x6587;&#x6848;<br>spinner     | &#x81EA;&#x5B9A;&#x4E49;&#x52A0;&#x8F7D;&#x56FE;&#x6807;&#x7C7B;&#x540D;
background     | &#x906E;&#x7F69;&#x80CC;&#x666F;&#x8272;<br>customClass     | Loading &#x7684;&#x81EA;&#x5B9A;&#x4E49;&#x7C7B;&#x540D;</p>
<p><br></p>
<h3 id="el-menu-&#x5BFC;&#x822A;&#x680F;"><a name="el-menu-&#x5BFC;&#x822A;&#x680F;" class="anchor-navigation-ex-anchor" href="#el-menu-&#x5BFC;&#x822A;&#x680F;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.32. el-menu &#x5BFC;&#x822A;&#x680F;</h3>
<p>el-menu-item</p>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>mode</td>
<td>&#x6A21;&#x5F0F;         horizontal / vertical     </td>
</tr>
<tr>
<td>collapse</td>
<td>&#x662F;&#x5426;&#x6C34;&#x5E73;&#x6298;&#x53E0;&#x6536;&#x8D77;&#x83DC;&#x5355;&#xFF08;&#x4EC5;&#x5728; mode &#x4E3A; vertical &#x65F6;&#x53EF;&#x7528;&#xFF09;</td>
</tr>
<tr>
<td>background-color</td>
<td>&#x83DC;&#x5355;&#x7684;&#x80CC;&#x666F;&#x8272;&#xFF08;&#x4EC5;&#x652F;&#x6301; hex &#x683C;&#x5F0F;&#xFF09;</td>
</tr>
<tr>
<td>text-color</td>
<td>&#x83DC;&#x5355;&#x7684;&#x6587;&#x5B57;&#x989C;&#x8272;&#xFF08;&#x4EC5;&#x652F;&#x6301; hex &#x683C;&#x5F0F;&#xFF09;</td>
</tr>
<tr>
<td>active-text-color</td>
<td>&#x5F53;&#x524D;&#x6FC0;&#x6D3B;&#x83DC;&#x5355;&#x7684;&#x6587;&#x5B57;&#x989C;&#x8272;&#xFF08;&#x4EC5;&#x652F;&#x6301; hex &#x683C;&#x5F0F;&#xFF09;</td>
</tr>
<tr>
<td>default-active</td>
<td>&#x5F53;&#x524D;&#x6FC0;&#x6D3B;&#x83DC;&#x5355;&#x7684; index</td>
</tr>
<tr>
<td>default-openeds</td>
<td>&#x5F53;&#x524D;&#x6253;&#x5F00;&#x7684; sub-menu &#x7684; index &#x7684;&#x6570;&#x7EC4;     </td>
</tr>
<tr>
<td>unique-opened</td>
<td>&#x662F;&#x5426;&#x53EA;&#x4FDD;&#x6301;&#x4E00;&#x4E2A;&#x5B50;&#x83DC;&#x5355;&#x7684;&#x5C55;&#x5F00;     </td>
</tr>
<tr>
<td>menu-trigger</td>
<td>&#x5B50;&#x83DC;&#x5355;&#x6253;&#x5F00;&#x7684;&#x89E6;&#x53D1;&#x65B9;&#x5F0F;(&#x53EA;&#x5728; mode &#x4E3A; horizontal &#x65F6;&#x6709;&#x6548;)     hover / click  </td>
</tr>
<tr>
<td>router</td>
<td>&#x662F;&#x5426;&#x4F7F;&#x7528; vue-router &#x7684;&#x6A21;&#x5F0F;&#xFF0C;&#x542F;&#x7528;&#x8BE5;&#x6A21;&#x5F0F;&#x4F1A;&#x5728;&#x6FC0;&#x6D3B;&#x5BFC;&#x822A;&#x65F6;&#x4EE5; index &#x4F5C;&#x4E3A; path &#x8FDB;&#x884C;&#x8DEF;&#x7531;&#x8DF3;&#x8F6C;     </td>
</tr>
<tr>
<td>collapse-transition</td>
<td>&#x662F;&#x5426;&#x5F00;&#x542F;&#x6298;&#x53E0;&#x52A8;&#x753B;</td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-tabs--&#x6807;&#x7B7E;&#x9875;"><a name="el-tabs--&#x6807;&#x7B7E;&#x9875;" class="anchor-navigation-ex-anchor" href="#el-tabs--&#x6807;&#x7B7E;&#x9875;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.33. el-tabs  &#x6807;&#x7B7E;&#x9875;</h3>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>type</td>
<td>&#x98CE;&#x683C;&#x7C7B;&#x578B;         card/border-card</td>
</tr>
<tr>
<td>closable</td>
<td>&#x6807;&#x7B7E;&#x662F;&#x5426;&#x53EF;&#x5173;&#x95ED;     </td>
</tr>
<tr>
<td>addable</td>
<td>&#x6807;&#x7B7E;&#x662F;&#x5426;&#x53EF;&#x589E;&#x52A0;</td>
</tr>
<tr>
<td>editable</td>
<td>&#x6807;&#x7B7E;&#x662F;&#x5426;&#x540C;&#x65F6;&#x53EF;&#x589E;&#x52A0;&#x548C;&#x5173;&#x95ED;     </td>
</tr>
<tr>
<td>value</td>
<td>&#x7ED1;&#x5B9A;&#x503C;&#xFF0C;&#x9009;&#x4E2D;&#x9009;&#x9879;&#x5361;&#x7684; name     </td>
</tr>
<tr>
<td>tab-position</td>
<td>&#x9009;&#x9879;&#x5361;&#x6240;&#x5728;&#x4F4D;&#x7F6E;         top/right/bottom/left    top</td>
</tr>
<tr>
<td>stretch</td>
<td>&#x6807;&#x7B7E;&#x7684;&#x5BBD;&#x5EA6;&#x662F;&#x5426;&#x81EA;&#x6491;&#x5F00;     </td>
</tr>
<tr>
<td>before-leave</td>
<td>&#x5207;&#x6362;&#x6807;&#x7B7E;&#x4E4B;&#x524D;&#x7684;&#x94A9;&#x5B50;&#xFF0C;&#x82E5;&#x8FD4;&#x56DE; false &#x6216;&#x8005;&#x8FD4;&#x56DE; Promise &#x4E14;&#x88AB; reject&#xFF0C;&#x5219;&#x963B;&#x6B62;&#x5207;&#x6362;&#x3002;</td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-breadcrumb-&#x9762;&#x5305;&#x5C51;"><a name="el-breadcrumb-&#x9762;&#x5305;&#x5C51;" class="anchor-navigation-ex-anchor" href="#el-breadcrumb-&#x9762;&#x5305;&#x5C51;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.34. el-breadcrumb &#x9762;&#x5305;&#x5C51;</h3>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>separator</td>
<td>&#x5206;&#x9694;&#x7B26;</td>
</tr>
<tr>
<td>separator-class</td>
<td>&#x56FE;&#x6807;&#x5206;&#x9694;&#x7B26;  </td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-dropdown--&#x4E0B;&#x62C9;&#x83DC;&#x5355;"><a name="el-dropdown--&#x4E0B;&#x62C9;&#x83DC;&#x5355;" class="anchor-navigation-ex-anchor" href="#el-dropdown--&#x4E0B;&#x62C9;&#x83DC;&#x5355;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.35. el-dropdown  &#x4E0B;&#x62C9;&#x83DC;&#x5355;</h3>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>type</td>
<td>&#x83DC;&#x5355;&#x6309;&#x94AE;&#x7C7B;&#x578B;&#xFF0C;&#x540C; Button &#x7EC4;&#x4EF6;(&#x53EA;&#x5728;split-button&#x4E3A; true &#x7684;&#x60C5;&#x51B5;&#x4E0B;&#x6709;&#x6548;)     </td>
</tr>
<tr>
<td>size</td>
<td>&#x83DC;&#x5355;&#x5C3A;&#x5BF8;&#xFF0C;&#x5728;split-button&#x4E3A; true &#x7684;&#x60C5;&#x51B5;&#x4E0B;&#x4E5F;&#x5BF9;&#x89E6;&#x53D1;&#x6309;&#x94AE;&#x751F;&#x6548;         medium / small / mini     </td>
</tr>
<tr>
<td>split-button</td>
<td>&#x4E0B;&#x62C9;&#x89E6;&#x53D1;&#x5143;&#x7D20;&#x5448;&#x73B0;&#x4E3A;&#x6309;&#x94AE;&#x7EC4;     </td>
</tr>
<tr>
<td>placement</td>
<td>&#x83DC;&#x5355;&#x5F39;&#x51FA;&#x4F4D;&#x7F6E;         top/top-start/top-end/bottom/bottom-start/bottom-end     </td>
</tr>
<tr>
<td>trigger</td>
<td>&#x89E6;&#x53D1;&#x4E0B;&#x62C9;&#x7684;&#x884C;&#x4E3A;         hover, click</td>
</tr>
<tr>
<td>hide-on-click</td>
<td>&#x662F;&#x5426;&#x5728;&#x70B9;&#x51FB;&#x83DC;&#x5355;&#x9879;&#x540E;&#x9690;&#x85CF;&#x83DC;&#x5355;</td>
</tr>
<tr>
<td>show-timeout</td>
<td>&#x5C55;&#x5F00;&#x4E0B;&#x62C9;&#x83DC;&#x5355;&#x7684;&#x5EF6;&#x65F6;&#xFF08;&#x4EC5;&#x5728; trigger &#x4E3A; hover &#x65F6;&#x6709;&#x6548;&#xFF09;     </td>
</tr>
<tr>
<td>hide-timeout</td>
<td>&#x6536;&#x8D77;&#x4E0B;&#x62C9;&#x83DC;&#x5355;&#x7684;&#x5EF6;&#x65F6;&#xFF08;&#x4EC5;&#x5728; trigger &#x4E3A; hover &#x65F6;&#x6709;&#x6548;&#xFF09;</td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-steps--&#x6B65;&#x9AA4;&#x6761;"><a name="el-steps--&#x6B65;&#x9AA4;&#x6761;" class="anchor-navigation-ex-anchor" href="#el-steps--&#x6B65;&#x9AA4;&#x6761;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.36. el-steps  &#x6B65;&#x9AA4;&#x6761;</h3>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>space</td>
<td>&#x6BCF;&#x4E2A; step &#x7684;&#x95F4;&#x8DDD;&#xFF0C;&#x4E0D;&#x586B;&#x5199;&#x5C06;&#x81EA;&#x9002;&#x5E94;&#x95F4;&#x8DDD;&#x3002;&#x652F;&#x6301;&#x767E;&#x5206;&#x6BD4;&#x3002;     </td>
</tr>
<tr>
<td>direction</td>
<td>&#x663E;&#x793A;&#x65B9;&#x5411;         vertical/horizontal     </td>
</tr>
<tr>
<td>active</td>
<td>&#x8BBE;&#x7F6E;&#x5F53;&#x524D;&#x6FC0;&#x6D3B;&#x6B65;&#x9AA4;     </td>
</tr>
<tr>
<td>process-status</td>
<td>&#x8BBE;&#x7F6E;&#x5F53;&#x524D;&#x6B65;&#x9AA4;&#x7684;&#x72B6;&#x6001;         wait / process / finish / error / success     </td>
</tr>
<tr>
<td>finish-status</td>
<td>&#x8BBE;&#x7F6E;&#x7ED3;&#x675F;&#x6B65;&#x9AA4;&#x7684;&#x72B6;&#x6001;         wait / process / finish / error / success     </td>
</tr>
<tr>
<td>align-center</td>
<td>&#x8FDB;&#x884C;&#x5C45;&#x4E2D;&#x5BF9;&#x9F50;</td>
</tr>
<tr>
<td>simple</td>
<td>&#x662F;&#x5426;&#x5E94;&#x7528;&#x7B80;&#x6D01;&#x98CE;&#x683C;     </td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-card--&#x5361;&#x7247;"><a name="el-card--&#x5361;&#x7247;" class="anchor-navigation-ex-anchor" href="#el-card--&#x5361;&#x7247;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.37. el-card  &#x5361;&#x7247;</h3>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>&#x8BBE;&#x7F6E; header&#xFF0C;&#x4E5F;&#x53EF;&#x4EE5;&#x901A;&#x8FC7; slot#header &#x4F20;&#x5165;</td>
</tr>
<tr>
<td>body-style</td>
<td>&#x8BBE;&#x7F6E; body &#x7684;&#x6837;&#x5F0F;     </td>
</tr>
<tr>
<td>shadow</td>
<td>&#x8BBE;&#x7F6E;&#x9634;&#x5F71;&#x663E;&#x793A;&#x65F6;&#x673A;         always / hover / never     </td>
</tr>
</tbody>
</table>
<p><br></p>
<h3 id="el-carousel--&#x5E7B;&#x706F;&#x7247;-&#x3001;&#x8D70;&#x9A6C;&#x706F;"><a name="el-carousel--&#x5E7B;&#x706F;&#x7247;-&#x3001;&#x8D70;&#x9A6C;&#x706F;" class="anchor-navigation-ex-anchor" href="#el-carousel--&#x5E7B;&#x706F;&#x7247;-&#x3001;&#x8D70;&#x9A6C;&#x706F;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5.38. el-carousel  &#x5E7B;&#x706F;&#x7247; &#x3001;&#x8D70;&#x9A6C;&#x706F;</h3>
<table>
<thead>
<tr>
<th>&#x53C2;&#x6570;</th>
<th>&#x8BF4;&#x660E;     </th>
</tr>
</thead>
<tbody>
<tr>
<td>height</td>
<td>&#x8D70;&#x9A6C;&#x706F;&#x7684;&#x9AD8;&#x5EA6;</td>
</tr>
<tr>
<td>initial-index</td>
<td>&#x521D;&#x59CB;&#x72B6;&#x6001;&#x6FC0;&#x6D3B;&#x7684;&#x5E7B;&#x706F;&#x7247;&#x7684;&#x7D22;&#x5F15;&#xFF0C;&#x4ECE; 0 &#x5F00;&#x59CB;     </td>
</tr>
<tr>
<td>trigger</td>
<td>&#x6307;&#x793A;&#x5668;&#x7684;&#x89E6;&#x53D1;&#x65B9;&#x5F0F;  click</td>
</tr>
<tr>
<td>autoplay</td>
<td>&#x662F;&#x5426;&#x81EA;&#x52A8;&#x5207;&#x6362;     </td>
</tr>
<tr>
<td>interval</td>
<td>&#x81EA;&#x52A8;&#x5207;&#x6362;&#x7684;&#x65F6;&#x95F4;&#x95F4;&#x9694;&#xFF0C;&#x5355;&#x4F4D;&#x4E3A;&#x6BEB;&#x79D2;    number     </td>
</tr>
<tr>
<td>indicator-position</td>
<td>&#x6307;&#x793A;&#x5668;&#x7684;&#x4F4D;&#x7F6E;         outside/none      </td>
</tr>
<tr>
<td>arrow</td>
<td>&#x5207;&#x6362;&#x7BAD;&#x5934;&#x7684;&#x663E;&#x793A;&#x65F6;&#x673A;         always/hover/never     </td>
</tr>
<tr>
<td>type</td>
<td>&#x8D70;&#x9A6C;&#x706F;&#x7684;&#x7C7B;&#x578B;         card</td>
</tr>
</tbody>
</table>
<footer class="page-footer"><span class="copyright">&#x65E0;&#x7248;&#x6743; &#x53EF;&#x4EE5;&#x65E0;&#x9650;&#x5236;&#x4F7F;&#x7528;&#xFF01; all right reserved&#xFF0C;powered by Gitbook</span><span class="footer-modification">&#x8BE5;&#x6587;&#x4EF6;&#x66F4;&#x65B0;&#x65F6;&#x95F4;&#xFF1A;
2018-10-26 11:44:27
</span></footer>
                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="vue-i18n.html" class="navigation navigation-prev " aria-label="Previous page: vue-i18n">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="iview.html" class="navigation navigation-next " aria-label="Next page: iview">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"element","level":"1.3.14","depth":2,"next":{"title":"iview","level":"1.3.15","depth":2,"path":"chinese/web/iview.md","ref":"chinese/web/iview.md","articles":[]},"previous":{"title":"vue-i18n","level":"1.3.13","depth":2,"path":"chinese/web/vue-i18n.md","ref":"chinese/web/vue-i18n.md","articles":[]},"dir":"ltr"},"config":{"plugins":["-search","search-plus","todo","anchor-navigation-ex","copy-code-button","fontsettings","tbfed-pagefooter","donate","local-video","splitter","favicon","theme-comscore","local-video"],"styles":{"website":"styles/website.css"},"pluginsConfig":{"tbfed-pagefooter":{"copyright":"无版权 可以无限制使用！","modify_label":"该文件更新时间：","modify_format":"YYYY-MM-DD HH:mm:ss"},"todo":{},"splitter":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"donate":{"alipay":"http://oyru0ayig.bkt.clouddn.com/201803011956_osChina_支付宝收款码.png","alipayText":"支付宝打赏","button":"打赏","title":"","wechat":"http://oyru0ayig.bkt.clouddn.com/201803011956_osChina_微信收款码.png","wechatText":"微信打赏"},"fontsettings":{"family":"sans","size":2,"theme":"sepia"},"highlight":{},"anchor-navigation-ex":{"associatedWithSummary":true,"float":{"floatIcon":"fa fa-navicon","level1Icon":"","level2Icon":"","level3Icon":"","showLevelIcon":false},"mode":"float","multipleH1":true,"pageTop":{"level1Icon":"","level2Icon":"","level3Icon":"","showLevelIcon":false},"printLog":false,"showGoTop":true,"showLevel":true},"favicon":{"shortcut":"assets/images/favicon.ico","bookmark":"assets/images/favicon.ico"},"theme-comscore":{},"local-video":{},"copy-code-button":{},"sharing":{"all":["facebook","google","twitter","weibo","instapaper"],"facebook":true,"google":false,"instapaper":false,"twitter":true,"vk":false,"weibo":false},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false},"search-plus":{}},"theme":"default","author":"Aivin","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"Aivin开发笔记","language":"zh-hans","gitbook":"*","description":"Aivin开发笔记"},"file":{"path":"chinese/web/element.md","mtime":"2018-10-26T03:44:27.184Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2019-04-12T07:42:16.699Z"},"basePath":"../..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../../gitbook/gitbook.js"></script>
    <script src="../../gitbook/theme.js"></script>
    
        
        <script src="../../gitbook/gitbook-plugin-search-plus/jquery.mark.min.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-search-plus/search.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-copy-code-button/toggle.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-donate/plugin.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-local-video/video.min.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-splitter/splitter.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-theme-comscore/test.js"></script>
        
    

    </body>
</html>

